图表插件Highcharts的动态化赋值,实现图表数据的动态化设置显示
在很早之前就介紹過(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)題。
- 上一篇: Python学习:16.Python面对
- 下一篇: Salesforce 小知识:大量“子记