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提供CDN 服务,在下载界面可见详细描述
jQuery下载