JQuery_HighCharts生成圖形報表_餅狀圖(模仿後臺傳送資料 JSON格式)
阿新 • • 發佈：2019-02-08
這幾天博主做了個需求，需要將圖形統計的資料以報表的形式顯示出來：
HighChart 功能：
Highcharts 雲服務提供簡單便捷的方法生成視覺化圖表，使用者不再需要程式設計基礎，只需要複製資料即可生成漂亮，可定製的圖表。雲服務提供圖表生成，託管，分享等功能。
主要特點：
- 強大互動性
- 強大的分享功能
- 響應式
這裡主要分享下程式碼。
餅狀圖的一些配置：
程式碼：
<!DOCTYPE html> <html> <head> <title>每日部門考勤統計</title> <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script> <style type="text/css"> </style> <script type="text/javascript"> //<script language="text/javascript" type="text/javascript" src="http://cdn.hcharts.cn/highcharts/exporting.js"> var k = { "depList": [ {"departmentName":"研發部","shouldNum":3,"actualNum":2}, {"departmentName":"運維部","shouldNum":5,"actualNum":5}, {"departmentName":"市場部","shouldNum":10,"actualNum":8}, {"departmentName":"決策部","shouldNum":10,"actualNum":10} ] }; $(document).ready(function() { var length = k.depList.length; //console.log(length); for (var i = 0; i < length; i++) { //動態載入DOM節點 $("#depStat").append('<div id="container' + i + '" style="width: 300px;height: 300px; background-color:green; float:left;"></div>'); var domIdString = '#container' + i; //console.log(domIdString); $(domIdString).highcharts({ chart: { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: true }, //標題 title: { text: null }, //提示資訊, 滑鼠懸浮時 tooltip: { enabled: false, shadow: false, // 是否顯示陰影 formatter: function () { return '<b>' + this.point.name + '</b>: ' + this.percentage.toFixed(2) + ' %'; } }, //資料顯示選項 plotOptions: { pie: { allowPointSelect: false, //取消選擇切分的效果 cursor: 'pointer', dataLabels: { enabled: true, //color: '#000000', formatter: function () { return '<b>' + this.point.name + '</b>: ' + this.point.percentage.toFixed(2) + ' %'; }, distance: -20, style: { color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' } } } }, //版權資訊 credits: { enabled: false }, //資料資訊 series: [{ type: 'pie', name: null, data: null }] }); //對每個DOM節點的修改 var currentChart = $(domIdString).highcharts(); currentChart.showLoading(); currentChart.setTitle({text: k.depList[i].departmentName }); var currentSeries = currentChart.series[0]; var data = [ ['實到人數', k.depList[i].actualNum], ['缺勤人數',k.depList[i].shouldNum - k.depList[i].actualNum] ] currentSeries.setData(data); currentChart.setSize(200, 200); currentChart.hideLoading(); } }); </script> </head> <body> <div id="depStat" style="width:1000px"></div> </body> </html>
這裡博主遇到了個問題，highCharts 生成多個餅狀圖的時候，餅狀圖的大小不一致， 據說只要 $("xxxx").highCharts().setSize(x,y) 即可。。。，但是貌似對於設定300及以上的寬高又出現問題了，求大神解答。。。
實現效果：
