圖表外掛Highcharts的動態化賦值，實現圖表資料的動態化設定顯示

1、Bootstrap框架圖示的展示

餅圖的資料展示介面效果如下所示

image

柱狀圖以及其他曲線圖展示效果如下所示。

image

使用這些圖表功能強，我們一般需要在頁面裡面引入對應的JS+CSS

image

2、使用指令碼動態設定圖表的資料

預設的案例，這些資料都是直接繫結在裡面的，有時候我們需要動態設定，那麼需要分析好對應的資料屬性，以及設定的API，才能正常進行顯示。

以餅圖為例，我們需要分析它的資料結構，一般是Series裡面的Data資料格式，不同的圖表樣式需要的資料結構不太一樣，對於圖表而已，它的資料格式如下所示。

image

另外也可以使用key、Value方式的定義格式，如下資料所示。

image

那麼，有了這些瞭解，我們就可以透過Ajax方式，動態從資料庫裡面獲取資料，並繫結在介面上顯示即可。

首先我們定義好介面上的一個圖表展示控制元件DIV層，如下程式碼所示。

<div class="tab-char" id="container1" style="height: 300px;max-width:500px"></div>

然後透過JS動態建立對應的圖表物件，並設定圖表的資料即可。

       var chart1 = new Highcharts.Chart({            chart: {                renderTo: "container1",                plotBackgroundColor: null,                plotBorderWidth: null,                plotShadow: false,
            },            title: {                text: '集團分子公司人員組成'
            },            tooltip: {                pointFormat: '{series.name}: <b>{point.y}</b>'
            },            plotOptions: {                pie: {                    allowPointSelect: true,                    cursor: 'pointer',                    dataLabels: {                        enabled: true,                        format: '<b>{point.name}</b>: {point.percentage:.1f} %',                        style: {                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                        }
                    },                    //showInLegend: true
                }
            },            series: [{                type: 'pie',                name: '人員數量',                data: []
            }]
        });

動態構建資料是透過Ajax方式實現的，如下所示。

        //透過Ajax獲取圖表1資料
        $.ajaxSettings.async = false;        var data1 = [];
        $.getJSON("/User/GetCompanyUserCountJson", function (dict) {                
            for (var key in dict) {                if (dict.hasOwnProperty(key)) {
                    data1.push([key, dict[key]]);
                }
            };
            chart1.series[0].setData(data1);
        });

這裡值得注意的是，我們獲取一個圖表物件，是透過下面程式碼方式獲取才行

 var chart1 = new Highcharts.Chart({

這種方式可以獲得對應的chart1物件，並進行設定圖表屬性或者呼叫API介面。

又如對於傳入一個陣列物件的圖表

image

它的動態設定資料的程式碼如下所示。

        var chart4 = new Highcharts.Chart({            chart: {                renderTo: 'container4',                type: 'column',                margin: 75,                options3d: {                    enabled: true,                    alpha: 15,                    beta: 15,                    depth: 50,                    viewDistance: 25
                }
            },            title: {                text: 'Chart rotation demo'
            },            subtitle: {                text: 'Test options by dragging the sliders below'
            },            plotOptions: {                column: {                    depth: 25
                }
            },            series: [
                { 
                    data: null//[29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
                }
            ]
        });        //模擬動態設定，chartData資料可以透過Ajax動態獲取
        var chartData = [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4];
        chart4.series[0].setData(chartData);

如果對於柱狀圖的資料，我們又是需要分析它的資料結構，然後進行相應的資料的

image

柱狀圖的資料格式大概如下所示。

image

完整的柱狀圖JS物件處理程式碼如下所示。

        //柱狀圖的展示
        var linechart1 = new Highcharts.Chart({            chart: {                renderTo: 'lineContainer1',                type: 'column',
            },            title: {                text: '銷售出貨日報表'
            },            xAxis: {                categories: []//['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
            },            yAxis: {                allowDecimals: false,                min: 0,                title: {                    text: '銷售金額'
                }
            },            tooltip: {                formatter: function () {                    return '<b>' + this.x + '</b><br/>' +                        this.series.name + ': ' + this.y + '<br/>' +                        'Total: ' + this.point.stackTotal;
                }
            },            plotOptions: {                column: {                    stacking: 'normal'
                }
            },            series: [            //{
            //    name: 'John',
            //    data: [5, 3, 4, 7, 2],
            //    stack: 'male'
            //}, {
            //    name: 'Joe',
            //    data: [3, 4, 4, 2, 5],
            //    stack: 'male'
            //}, {
            //    name: 'Jane',
            //    data: [2, 5, 6, 2, 1],
            //    stack: 'female'
            //}, {
            //    name: 'Janet',
            //    data: [3, 0, 4, 4, 3],
            //    stack: 'female'
            //}
            ]
        });

我們上面註釋掉的 categories 和 series 資料，就是為了讓我們方便透過JS指令碼動態新增進去，實現圖示資料的動態化設定的。

例如對於銷售出貨資料的統計，我們模擬的部分資料來進行展示。

        //設定資料，這裡可以透過JSON獲取
        var category = ['2018-7-1', '2018-7-2', '2018-7-3', '2018-7-4', '2018-7-5'];        var seriesData = [{            name: 'AB',            data: [500, 300, 400, 700, 200]
        }, {            name: 'BC',            data: [300, 400, 400, 200, 500]
        }, {            name: 'CD',            data: [200, 500, 600, 200, 100]
        }, {            name: 'EF',            data: [300, 0, 400, 400, 300]
        }];        //先移除選來的series物件，然後加入
        while (linechart1.series.length > 0) {
            linechart1.series[0].remove(true);
        }        for (var i = 0; i < seriesData.length; i++) {            //加入categories
            linechart1.xAxis[0].setCategories(category);            //加入series
            linechart1.addSeries(seriesData[i]);
        }

透過這樣的處理，我們的資料就可以實現動態的顯示了。

image

作者：伍華聰_開發框架
連結：