在很早之前就介紹過圖表插件Highcharts的使用了，在2014年的隨筆《基于MVC4+EasyUI的Web開發(fā)框架經(jīng)驗(yàn)總結(jié)（4）--使用圖表控件Highcharts》，這里基本上都介紹的比較完整，基本的設(shè)置也沒有太大的差異，本篇介紹的是基于Bootstrap開發(fā)框架的界面處理，以及對(duì)圖表插件Highcharts的其他模塊，如柱狀圖，線圖等其他樣式的信息進(jìn)行動(dòng)態(tài)設(shè)置，以期達(dá)到利用數(shù)據(jù)庫的數(shù)據(jù)，方便動(dòng)態(tài)設(shè)置顯示出來。
1、Bootstrap框架圖標(biāo)的展示
餅圖的數(shù)據(jù)展示界面效果如下所示
柱狀圖以及其他曲線圖展示效果如下所示。
使用這些圖表功能強(qiáng)，我們一般需要在頁面里面引入對(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ù)所示。
那么，有了這些了解，我們就可以通過Ajax方式，動(dòng)態(tài)從數(shù)據(jù)庫里面獲取數(shù)據(jù)，并綁定在界面上顯示即可。
首先我們定義好界面上的一個(gè)圖表展示控件DIV層，如下代碼所示。
<div class="tab-char" id="container1" style="height: 300px;max-width:500px"></div>
然后通過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ù)是通過Ajax方式實(shí)現(xiàn)的，如下所示。
//通過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ì)象，是通過下面代碼方式獲取才行
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ù)可以通過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: '銷售出貨日?qǐng)?bào)表'
},
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 數(shù)據(jù)，就是為了讓我們方便通過JS腳本動(dòng)態(tài)添加進(jìn)去，實(shí)現(xiàn)圖標(biāo)數(shù)據(jù)的動(dòng)態(tài)化設(shè)置的。
例如對(duì)于銷售出貨數(shù)據(jù)的統(tǒng)計(jì)，我們模擬的部分?jǐn)?shù)據(jù)來進(jìn)行展示。
//設(shè)置數(shù)據(jù)，這里可以通過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對(duì)象，然后加入
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]);
}
通過這樣的處理，我們的數(shù)據(jù)就可以實(shí)現(xiàn)動(dòng)態(tài)的顯示了。
其他的圖表也是通過類似的方式，通過獲取到對(duì)應(yīng)的圖表對(duì)象，然后動(dòng)態(tài)構(gòu)建數(shù)據(jù)，并將數(shù)據(jù)設(shè)置到對(duì)應(yīng)的圖表屬性上即可。
這樣處理方式的差異，我們也可以參考下官網(wǎng)提供的一些屬性或者接口的定義來進(jìn)行處理，本篇案例也是綜合了很多其他例子的說明進(jìn)行測試，并獲得正常的數(shù)據(jù)展示效果。
本篇主要介紹Highcharts插件的動(dòng)態(tài)設(shè)置屬性的處理，對(duì)于其他圖表插件，如EChart等也是一個(gè)很好的參考，比較圖表的數(shù)據(jù)格式都是很接近的。
