Highcharts制作统计图表

近期项目中要做些统计图表，而做统计图表的前端框架也有不少，听朋友说Highcharts做统计图表页面效果还错就到网上下了个Highcharts的框架研究了下，刚开始研究的时候遇到了些问题花了我不少的时间，而且API和网上的资料大部分都是静态的图标展现让刚接触的人很容易走进一些误区，下面就将我做的几个简单的demo拿出来分享下：

用Highcharts制作统计图表主要引用的js是jquery和highcharts.js这两个就OK了，就能实现我demo中的这些统计图。

1、柱状图
页面：
<div id="containerColumn" style="width: 800px; height: 400px; margin: 0 auto"></div>

js生成图表的就是：

//柱状图
function countDepartment(){
$(function(){
var x = [];//X轴
var y = [];//Y轴
var xtext = [];//X轴TEXT
var color = ["gray","pink","red","blue","yellow","green","#CCC"];
$.ajax({
type:"post",
url:"userquery.do?method=countDepart",
success:function(result){
var json = eval("(" + result + ")");
for (var key in json.list){
json.list[key].y = json.list[key].num;
xtext[key] = json.list[key].departname;
json.list[key].color = color[key];
}
chart.series[0].setData(json.list);//数据填充到highcharts上面
},
error:function(e){

}
});

var chart = new Highcharts.Chart({
chart:{
renderTo:'containerColumn',
type:'column' //显示类型 柱形
},
title:{
text:'部门人数统计图' //图表的标题
},
xAxis:{
categories:xtext
},
yAxis:{
title:{
text:'人数' //Y轴的名称
},
},
series:[{
name:"部门人数"
}]
});
});
}

在制作柱状图时要注意的是后台传到页面的json格式数据，如果数据格式不对图表就会不显示，后台传到页面的json格式：{"list":[{"departname":"HTC","num":1},{"departname":"三星","num":1},{"departname":"aple","num":1}]


2.饼状图
<div id="containerPie" style="min-width:400px;height:400px"></div>

js生成图表：

//饼状图
function countPie(){
$(function () {
var dpie ={
chart: {
renderTo:'containerPie',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: '饼状统计图'
},
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'
}
}
}
},
series: [{
type: 'pie',
name: '占百分比'
}]
};

$.ajax({
type:"post",
url:"userquery.do?method=countPie",
success:function(result){
dpie.series[0].data = eval(result);
new Highcharts.Chart(dpie);
}
});
});
}

后台传的json格式：[["张三",7],["李四",13],["王五",80]]

3.曲线图

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

js生成图表：

//曲线图
function countScatter(){
$(function () {
var chart = {
chart: {
//显示的div
renderTo: 'containerScatter',
//图形类型
defaultSeriesType: 'spline'
},
title: {
text: '按月统计',
x: -20 //center
},
subtitle: {
text: '巡检次数',
x: -20
},
xAxis: {
title: {
enabled: true
},
tickPixelInterval:50,
categories: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月']
},
yAxis: {
title: {
text: '次数(次)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '次'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series:[]
};

$.ajax({
type:"post",
url:"userquery.do?method=countScatter",
success:function(result){
var data = eval("(" + result + ")");
chart.series=data;
new Highcharts.Chart(chart);
}
});
});
}

后台传的json格式：[{"name":"北京","data":[7,6,9,14,18,21,6,8,12,18,13,9]},{"name":"纽约","data":[6,5,8,6,7,15,3,4,13,11,5,8]},{"name":"柏林","data":[8,7,6,11,8,9,0,7,6,13,7,8]}]

好了demo的主要实现代码都贴出来了，希望能给需要帮助的小伙伴一点帮助，在这我要提醒下就是在Highcharts制作图表需要注意的地方就是json的格式和数据绑定。

附件中是我demo的效果图 :D