在很早之前就介紹過圖表插件Highcharts的使用了,在2014年的隨筆《基於MVC4+EasyUI的Web開發框架經驗總結(4)--使用圖表控制項Highcharts》,這裡基本上都介紹的比較完整,基本的設置也沒有太大的差異,本篇介紹的是基於Bootstrap開發框架的界面處理,以及對圖表插件Hi... ...
在很早之前就介紹過圖表插件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等也是一個很好的參考,比較圖表的數據格式都是很接近的。