在很早之前就介紹過圖表插件Highcharts的使用了，在2014年的隨筆《基於MVC4+EasyUI的Web開發框架經驗總結（4）--使用圖表控件Highcharts》，這裏基本上都介紹的比較完整，基本的設置也沒有太大的差異，本篇介紹的是基於Bootstrap開發框架的界面處理，以及對圖表插件Highcharts的其他模塊，如柱狀圖，線圖等其他樣式的信息進行動態設置，以期達到利用數據庫的數據，方便動態設置顯示出來。

1、Bootstrap框架圖標的展示

餅圖的數據展示界面效果如下所示

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

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

2、使用腳本動態設置圖表的數據

默認的案例，這些數據都是直接綁定在裏面的，有時候我們需要動態設置，那麽需要分析好對應的數據屬性，以及設置的API，才能正常進行顯示。

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

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

那麽，有了這些了解，我們就可以通過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接口。

又如對於傳入一個數組對象的圖表

它的動態設置數據的代碼如下所示。

        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);

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

柱狀圖的數據格式大概如下所示。

完整的柱狀圖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]);
        }

通過這樣的處理，我們的數據就可以實現動態的顯示了。

其他的圖表也是通過類似的方式，通過獲取到對應的圖表對象，然後動態構建數據，並將數據設置到對應的圖表屬性上即可。

這樣處理方式的差異，我們也可以參考下官網提供的一些屬性或者接口的定義來進行處理，本篇案例也是綜合了很多其他例子的說明進行測試，並獲得正常的數據展示效果。

本篇主要介紹Highcharts插件的動態設置屬性的處理，對於其他圖表插件，如EChart等也是一個很好的參考，比較圖表的數據格式都是很接近的。

圖表插件Highcharts的動態化賦值，實現圖表數據的動態化設置顯示