用highcharts做資料統計

ruanwenwu發表於2020-08-20

一、效果

先上一張用highchats做的圖表：

highcharts做資料統計
很直觀，而且支援圖片和csv以及excel格式的匯出。

二、核心程式碼

var chart = Highcharts.chart('container', {
        exporting: {
            filename: '資料',    //匯出檔案的sheetname
            formAttributes: {
                "acceptCharset": "utf-8"    //匯出圖片的中文編碼
            }
        },
        title: {
            text: startDay+'~'+endDay+'xx稽核情況'
        },
        subtitle: {
            text: ''
        },
        yAxis: {
            title: {
                text: '數量'
            }
        },
        xAxis: {
            'title':{
                'text':'日期'
            },
            'categories':category    //x軸資料，陣列

        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },
        series: msg,    //資料
        lang:{    //匯出相關中文名稱配置
            printChart: '列印圖表',
            downloadJPEG: '下載JPEG檔案',
            downloadPDF: '下載PDF檔案',
            downloadPNG: '下載PNG檔案',
            downloadSVG: '下載SVG檔案',
            downloadCSV: '下載CSV檔案',
            downloadXLS: '下載XLS檔案',
            viewData: '檢視資料表格',
            viewFullscreen:'全屏檢視'
        }
    });

以上程式碼中的msg變數的格式為：

用highcharts做資料統計

匯出功能需要引入匯出資料的js檔案：

<!-- 需要儲存匯出功能模組檔案是在 highcharts.js 之後引入 -->
<script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>
    <script src="https://code.highcharts.com.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
    <script src="//cdn.hcharts.cn/highcharts/modules/export-data.js"></script>
    <script src="//cdn.hcharts.cn/libs/highcharts-export-csv/export-csv.js"></script>
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章