利用highchart实现动态饼状图

引言

一直习惯于用highchart.js完成数据可视化页面的制作，做了很多图表都没有真正的整理一下，从今天起以后做的很多项目都要保存到自己的博客中，方便以后再使用时不用重新制作。

highchart

highchart是一个强大的js数据可视化的框架，可以简单的制作出许多漂亮的曲线、各种图表等等。至于为什么不用echart和其他的框架，可能是个人习惯吧，其实都差不太多。网上的那些模板大多数都只是一个例子，需要修改成自己所需要的图。

动态饼状图

由于我的研究背景相关数据是电流数据，最直观的电流数据就是以曲线图的形式展现，所以开发动态曲线图比较多，官网上也有相应的例子。其他图比如条形图或者饼图如果想实现动态变化，就得自己手动去改里面的js代码。上午刚帮老师完成一个数据可视化前端项目的开发，用到的就是饼形图的动态展示，找了一个大神调了很久，做出来了，所以保留一下，也算是给以后的开发之路有点铺垫吧。

直接上代码

js部分：

// highchart_pie_pic
Highcharts.setOptions({
	global: {
		useUTC: false
	}
});
Highcharts.chart('container', {
	chart: {
		plotBackgroundColor: null,
		plotBorderWidth: null,
		plotShadow: false,
		type: 'pie',
		events: {
			load: function () {
				var series = this.series[0];
				setInterval(function () {
					// jQuery.getJSON('http://localhost:8080/show_system2/servlet/FurRecentServlet',null,function(data) {//实时更新
					var newData = [
						{
							name: '优化状态百分比',
							y: 50*Math.random(),
							//sliced: true,
							selected: true
						}, {
							name: '非优状态百分比',
							y: 30*Math.random()
						}, {
							name: '超允许区间百分比',
							y: 20*Math.random()
						}
					]
					for(let each of newData){
						series.removePoint(0); // 删除旧数据
						series.addPoint(each); // 添新数据
					}
					// });//实时更新
				}, 1000);
			}
		}
	},
	title: {
		text: ''
	},
	colors:['#4dd3b9','#fdd67f','#ffaca8'],
	tooltip: {
		pointFormat: '{series.name}: <b>{point.percentage:.1f}%</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'
				}
			}
		}
	},
	credits:{
		enabled:false
	},
	series: [{
		name: 'Brands',
		colorByPoint: true,
		data: [{
			name: '优化状态百分比',
			y: 50,
			//sliced: true,
			selected: true
		}, {
			name: '非优状态百分比',
			y: 30
		}, {
			name: '超允许区间百分比',
			y: 20
		}]
	}]
});

HTML部分：

<div id="container" style="min-width:400px;height:400px"></div>

代码说明

正常来说，优化状态百分比，非优状态百分比，超允许区间百分比应该是公式算出来的，这里就用随机数代替了。定时器每隔1S变一次，jQuery.getJSON（）那块是留的ajax调用数据的接口，数据要是json格式，随机数暂时不用就先屏蔽掉了。反正上面两部分代码直接down下来，讲道理就可以看到实时变化的饼状图啦。

效果图

上图: