在很早之前就介紹過(guò)圖表插件Highcharts的使用了，在2014年的隨筆《基于MVC4+EasyUI的Web開(kāi)發(fā)框架經(jīng)驗(yàn)總結(jié)（4）--使用圖表控件Highcharts》，這里基本上都介紹的比較完整，基本的設(shè)置也沒(méi)有太大的差異，本篇介紹的是基于Bootstrap開(kāi)發(fā)框架的界面處理，以及對(duì)圖表插件Highcharts的其他模塊，如柱狀圖，線(xiàn)圖等其他樣式的信息進(jìn)行動(dòng)態(tài)設(shè)置，以期達(dá)到利用數(shù)據(jù)庫(kù)的數(shù)據(jù)，方便動(dòng)態(tài)設(shè)置顯示出來(lái)。

1、Bootstrap框架圖標(biāo)的展示

餅圖的數(shù)據(jù)展示界面效果如下所示

柱狀圖以及其他曲線(xiàn)圖展示效果如下所示。

?使用這些圖表功能強(qiáng)，我們一般需要在頁(yè)面里面引入對(duì)應(yīng)的JS+CSS

?

2、使用腳本動(dòng)態(tài)設(shè)置圖表的數(shù)據(jù)

默認(rèn)的案例，這些數(shù)據(jù)都是直接綁定在里面的，有時(shí)候我們需要?jiǎng)討B(tài)設(shè)置，那么需要分析好對(duì)應(yīng)的數(shù)據(jù)屬性，以及設(shè)置的API，才能正常進(jìn)行顯示。

以餅圖為例，我們需要分析它的數(shù)據(jù)結(jié)構(gòu)，一般是Series里面的Data數(shù)據(jù)格式，不同的圖表樣式需要的數(shù)據(jù)結(jié)構(gòu)不太一樣，對(duì)于圖表而已，它的數(shù)據(jù)格式如下所示。

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

那么，有了這些了解，我們就可以通過(guò)Ajax方式，動(dòng)態(tài)從數(shù)據(jù)庫(kù)里面獲取數(shù)據(jù)，并綁定在界面上顯示即可。

首先我們定義好界面上的一個(gè)圖表展示控件DIV層，如下代碼所示。

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

然后通過(guò)JS動(dòng)態(tài)創(chuàng)建對(duì)應(yīng)的圖表對(duì)象，并設(shè)置圖表的數(shù)據(jù)即可。

var chart1 = new Highcharts.Chart({chart: {renderTo: "container1",plotBackgroundColor: null,plotBorderWidth: null,plotShadow: false,},title: {text: '集團(tuán)分子公司人員組成'},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: '人員數(shù)量',data: []}]});

動(dòng)態(tài)構(gòu)建數(shù)據(jù)是通過(guò)Ajax方式實(shí)現(xiàn)的，如下所示。

//通過(guò)Ajax獲取圖表1數(shù)據(jù)$.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);});

這里值得注意的是，我們獲取一個(gè)圖表對(duì)象，是通過(guò)下面代碼方式獲取才行

var chart1 = new Highcharts.Chart({

這種方式可以獲得對(duì)應(yīng)的chart1對(duì)象，并進(jìn)行設(shè)置圖表屬性或者調(diào)用API接口。

?

又如對(duì)于傳入一個(gè)數(shù)組對(duì)象的圖表

它的動(dòng)態(tài)設(shè)置數(shù)據(jù)的代碼如下所示。

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] }]});//模擬動(dòng)態(tài)設(shè)置，chartData數(shù)據(jù)可以通過(guò)Ajax動(dòng)態(tài)獲取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);

如果對(duì)于柱狀圖的數(shù)據(jù)，我們又是需要分析它的數(shù)據(jù)結(jié)構(gòu)，然后進(jìn)行相應(yīng)的數(shù)據(jù)的

柱狀圖的數(shù)據(jù)格式大概如下所示。

完整的柱狀圖JS對(duì)象處理代碼如下所示。

//柱狀圖的展示var linechart1 = new Highcharts.Chart({chart: {renderTo: 'lineContainer1',type: 'column',},title: {text: '銷(xiāo)售出貨日?qǐng)?bào)表'},xAxis: {categories: []//['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] },yAxis: {allowDecimals: false,min: 0,title: {text: '銷(xiāo)售金額'}},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 數(shù)據(jù)，就是為了讓我們方便通過(guò)JS腳本動(dòng)態(tài)添加進(jìn)去，實(shí)現(xiàn)圖標(biāo)數(shù)據(jù)的動(dòng)態(tài)化設(shè)置的。

例如對(duì)于銷(xiāo)售出貨數(shù)據(jù)的統(tǒng)計(jì)，我們模擬的部分?jǐn)?shù)據(jù)來(lái)進(jìn)行展示。

//設(shè)置數(shù)據(jù)，這里可以通過(guò)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]}];//先移除選來(lái)的series對(duì)象，然后加入while (linechart1.series.length > 0) {linechart1.series[0].remove(true);}for (var i = 0; i < seriesData.length; i++) {//加入categorieslinechart1.xAxis[0].setCategories(category);//加入series linechart1.addSeries(seriesData[i]);}

通過(guò)這樣的處理，我們的數(shù)據(jù)就可以實(shí)現(xiàn)動(dòng)態(tài)的顯示了。

?

其他的圖表也是通過(guò)類(lèi)似的方式，通過(guò)獲取到對(duì)應(yīng)的圖表對(duì)象，然后動(dòng)態(tài)構(gòu)建數(shù)據(jù)，并將數(shù)據(jù)設(shè)置到對(duì)應(yīng)的圖表屬性上即可。

這樣處理方式的差異，我們也可以參考下官網(wǎng)提供的一些屬性或者接口的定義來(lái)進(jìn)行處理，本篇案例也是綜合了很多其他例子的說(shuō)明進(jìn)行測(cè)試，并獲得正常的數(shù)據(jù)展示效果。

本篇主要介紹Highcharts插件的動(dòng)態(tài)設(shè)置屬性的處理，對(duì)于其他圖表插件，如EChart等也是一個(gè)很好的參考，比較圖表的數(shù)據(jù)格式都是很接近的。?

轉(zhuǎn)載于:https://www.cnblogs.com/wuhuacong/p/9359103.html

總結(jié)

以上是生活随笔為你收集整理的图表插件Highcharts的动态化赋值，实现图表数据的动态化设置显示的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。