JQuery_HighCharts生成图形报表_饼状图(模仿后台传送数据 JSON格式)

来源：互联网发布：java集合类图解编辑：程序博客网时间：2024/05/22 12:41

这几天博主做了个需求，需要将图形统计的数据以报表的形式显示出来：

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及以上的宽高又出现问题了，求大神解答。。。

实现效果：

0 0