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

最新推荐文章于 2021-08-05 14:40:54 发布

高达一号

最新推荐文章于 2021-08-05 14:40:54 发布

阅读量4.7k

点赞数

分类专栏： JQuery应用

本文链接：https://blog.csdn.net/u010003835/article/details/50924048

版权

JQuery应用专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

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
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JQuery_HighCharts生成图形报表_饼状图(模仿后台传送数据 JSON格式)

这几天博主做了个需求，需要将图形统计的数据以报表的形式显示出来：HighChart 功能：Highcharts 云服务提供简单便捷的方法生成可视化图表，用户不再需要编程基础，只需要复制数据即可生成漂亮，可定制的图表。云服务提供图表生成，托管，分享等功能。主要特点：强大交互性强大的分享功能响应式这里用到了JQuery 插件 HighCharts: 讲解链接
复制链接

扫一扫