Highcharts之实时饼状图

1、导入highcharts.js和jQuery.js

2、Html代码和js代码

//container1为js中定义的图表渲染容器的 HTML 元素的 id 或对象引用
 <div id="container1" style="width:380px;height:230px;margin:0 auto;padding-top: 10px"> 
 </div>

$(function(){
	Highcharts.setOptions({
	//全局配置参数是针对所有 Highcharts 图表生效的配置，所以只能通过 Highcharts.setOption 函数来配置
		global:{
			useUTC:false     //默认true
	/*使用UTC的优点是，无论用户代理的时区设置如何，时间都显示得一样。当实时加载数据或需要正确的夏令时转换时，可以使用本地时间*/
		}
	});
	

var chars;
$(document).ready(function(){
//调用pie()函数
	pie()
});
});

function pie(){
	var options = {
//			图表定义
			chart:{
				backgroundColor:'transparent',     //背景色
				renderTo: 'container1',//图表渲染容器的 HTML 元素的 id 或对象引用
				type:'pie',				//饼状图，修改pie可改为饼图等其他图表
				marginRight:10,
			},
			//不同区域颜色
			colors:['#64E572','#24CBE5','#DDDF00','#6AF9C4','#058DC7'],  
			title:{
				//标题名称    
              text: '',
                //标题相对于水平对齐的偏移量，取值范围为：图表左边距到图表右边距，可以是负值，单位px
              x:-20
          }, 
    //图例，图例说明是包含图表中数列标志和名称的容器
          legend:{
        	  align:'center',
        		  floating:false,
        		  borderWidth:0
          },
          
             //数据提示框，显示每个点的含义（对应的x轴和y轴数据）
          tooltip: {
        	  headerFormat: '',
        	  pointFormat: '<span style="color:{point.color}">\u25CF</span> <b> {point.name}</b><br/>' +
              '占比：<b>{point.y}</b>%<br/>',
          }, 
             //数据例信息
          plotOptions: {
      		pie: {
      		//是否允许在点击数据点标记（markers）、柱子（柱形图）、扇区（饼图）时选中该点
      			allowPointSelect: true,
      /*指定鼠标滑过数据列时鼠标的形状。当绑定了数据列点击事件时，可以将此参数设置为 "pointer"，用来提醒用户改数据列是可以点击的*/
      			cursor: 'pointer',
      			dataLabels: {
      				enabled: true,
      				format: '<span style="color:{point.color}">\u25CF</span> <b> {point.name}</b><br/>' +
                    '占比：<b>{point.y}</b>%<br/>',
      				style: {
      					color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'white'
      				}
      			}
      		}
      	},
          //版权信息
          credits:{
        	  enabled:false
          },
        //数据列
        series:[{
        	name:'各区域人流量占比',
        	
        
        }]
	};
//ajax请求，获取后台数据
	$.ajax({
		url:'/Software-cup001/record_dataServlet',			//获取数据的页面地址
		
		//默认值: true，dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。
		cache:false,
		dataType:"json",
		data:{},
		//仅在服务器数据改变时获取新数据。默认值: false
		ifModified:false,
		success: function(result){
			
			var data = [];
			var suma=0;
			var sumb=0;
			var sumc=0;
			var sumd=0;
			var sume=0;
			var sum=0;
			//jQuery.each() 函数用于遍历指定的对象和数组
			jQuery.each(result, function(m,obj){
			
				if(obj.site=="校园大门"){
					
					suma+=obj.avgHeadNum;
				}
				else if(obj.site=="学校食堂"){
					
					sumb+=obj.avgHeadNum;
				}
				else if(obj.site=="大型商超"){
				
					sumc+=obj.avgHeadNum;
				}
				else if(obj.site=="政府大门"){
			
					sumd+=obj.avgHeadNum;
				}
				else if(obj.site=="交通枢纽"){
			
					sume+=obj.avgHeadNum;
				}
				
			
			});
			sum=suma+sumb+sumc+sumd+sume;
		
				data.push(
				//每个区域所占饼状图比例
					{name:"校园大门",y:parseInt((suma/sum)*100)},
					{name:"学校食堂",y:parseInt((sumb/sum)*100)},
					{name:"大型商超",y:parseInt((sumc/sum)*100)},
					{name:"政府大门",y:parseInt((sumd/sum)*100)},
					{name:"交通枢纽",y:parseInt((sume/sum)*100)}

				);
				
			options.series[0].data = data;
			chart = new Highcharts.Chart(options);
			$("#sum").html(sum);
		}
	});
	//定时器，每分钟执行一次pie()函数
	setTimeout("pie()",60000);
	}

3、Highcharts

Highcharts API文档

Highcharts.js下载地址

Highcharts提供CDN 服务，在下载界面可见详细描述
jQuery下载