當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

图表插件Highcharts的动态化赋值，实现图表数据的动态化设置显示

發布時間：2024/4/15 编程问答 27 豆豆

生活随笔收集整理的這篇文章主要介紹了图表插件Highcharts的动态化赋值，实现图表数据的动态化设置显示小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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

1、Bootstrap框架圖標的展示

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

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

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

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

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

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

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

那么，有了這些了解，我們就可以通過Ajax方式，動態從數據庫里面獲取數據，并綁定在界面上顯示即可。

首先我們定義好界面上的一個圖表展示控件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接口。

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

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

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

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

完整的柱狀圖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++) {//加入categorieslinechart1.xAxis[0].setCategories(category);//加入series linechart1.addSeries(seriesData[i]);}

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

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

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

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

轉載于:https://www.cnblogs.com/wuhuacong/p/9359103.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Python学习：16.Python面对
下一篇： Salesforce 小知识：大量“子记