JQuery_HighCharts生成图形报表_饼状图(模仿后台传送数据 JSON格式)
这几天博主做了个需求，需要将图形统计的数据以报表的形式显示出来：
HighChart 功能：
Highcharts 云服务提供简单便捷的方法生成可视化图表，用户不再需要编程基础，只需要复制数据即可生成漂亮，可定制的图表。云服务提供图表生成，托管，分享等功能。
主要特点：
- 强大交互性
- 强大的分享功能
- 响应式
这里用到了JQuery 插件 HighCharts: 讲解链接 http://www.hcharts.cn/docs/index.php
这里主要分享下代码。
其中js资源是通过CDN获取的，当然可以自己下载： HighCharts下载链接：http://www.hcharts.cn/product/download.php
饼状图的一些配置：
代码：
<!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及以上的宽高又出现问题了，求大神解答。。。
实现效果：