数据呈现&图表插件Highcharts介绍+图表联动案例

由于项目需要，学习并使用了Highcharts图表插件，这是一款功能强大、开源、美观、图表丰富、兼容绝大多数浏览器的纯js图表库插件。

Highcharts简介

下边的介绍来自Highcharts中文网

Highcharts是一款纯javascript编写的图表库，能够很简单便捷的在Web网站或Web应用中添加交互性的图表，Highcharts目前支持直线图、曲线图、面积图、柱状图、饼图、散点图等多达18种不同类型的图表，可以满足你对Web图表的任何需求 ！

Highcharts优势：兼容性好，开源，纯js，图表丰富，动态，多轴，能够导出和打印，支持缩放和加载外部数据。

另外，Highcharts 的运行需要两个 JS 文件， highcharts.js 及 jQuery 、 MooTools 、Prototype 、Highcharts Standalone Framework 常用 JS 框架中的一个。

目前Highcharts也有了中文网站，网址：http://www.hcharts.cn/ 方便大家学习使用，但是该网站的的API部分的汉化还在完善中，可以在这里学习和下载。在此感谢他们的无私奉献。

Highcharts API

虽然中文网站的汉化还未完全，但是看API的话还是推荐去Highcharts中文网，有详尽的解释和实例

API地址：

http://www.hcharts.cn/api/index.php

顺便一说他的搜索功能确实很好用=w=

项目实例

Highcharts中有多种图表，在使用中各个图表之间的差异不大，在这里我单独拿出一个比较有代表性的图表作为实例，并且会做详尽的注释，配合API阅读，应该能快速入门。

同时，我在两个饼图之间设置的联动，默认显示左边供应商的分布，当点击该饼图的一部分时，右边加载该供应商下所有工厂的分布图。

例子例子：

//Supplier1_factory begin       //右边的被联动的图表，显示每个供应商的工厂
var SupChartMain = new Highcharts.Chart({
chart:{
renderTo:"sup1", //图表插入id为他的div
type:"pie",  //类型是饼图
height:298,
width:520,
margin:0,
plotBackgroundColor:null,//背景色
plotBorderWidth:null,//边框
plotShadow:false,//阴影
},
colors:['#e74c3c','#c0392b','#D35400','#E67E22','#bdc3c7','#95a5a6','#7f8c8d','#34495E','#2C3E50','#ecf0f1'],//每一项的颜色设置
title:{//图表标题
text:'Please choose a supplier...'
},
credits:{//是否有highcharts水印
enabled:false
},
tooltip:{//鼠标hover之后的小tip显示Order：  变量用大括号，根据数据结构取出即可
pointFormat: 'Order:{point.x}',
},
legend: { //图例
align:'left',  //放左边
layout: 'vertical',  //改为垂直分布
verticalAlign:'top',  //放上边
y:40,//相对位置微调
x:-20,
itemStyle:{//每一项的样式
fontWeight:'400',
color:'#666'
}
},
plotOptions:{
pie:{
allowPointSelect:true,  //允许点击选中数据
animation:true,  //动画效果
states:{
hover:{
brightness:0,
}
},
dataLabels:{  //数据标签
enabled:true,  //启用
distance:-15,  //位置
formatter:function(){  //显示该数据的y%
return this.y + '%';
},
style:{  //样式
fontWeight:"400",
color:"#fff",
fontSize:'11px'
}
},
events: {  //增加点击事件
click: function(e) {
var sup_id = this.data[e.point.index].sup_id;//得到点击的数据
draw_factory_coverage(SupplyChart.mydata,sup_id);//这里是通过点击，画了一个新的饼图，其中SupplyChart.mydata是画这个饼图需要的参数，sup_id是该参数中我们点击的这部分数据的id
}
},
cursor: 'pointer', //手指效果
showInLegend: true, //在图例中显示
startAngle:0,  //开始角度
endAngle:360,  //结束角度  这样设置就是一个完整的圆
center:['50%', '50%'],   //位置

}
},

series:[{
type:'pie',//饼图
innerSize:'85%',//这里设置内边距，把饼图变成了圆环图
data:[1]
}]
});

//下边是画图的函数，其实就是整理数据然后传入图表对象
function draw_supplier_coverage(jdata_sups){
on_chart_load_complete(chart_factory_coverage_name);
if( jdata_sups.result != "success"){
alert("load inspector workload data failed");
return;
}
var sups= [];   //存放最终数据的数组
var orders = [];    //存放各个供应商总订单数的数组
var total_order = 0;  //所有供应商总订单数
for(var i=0;i<jdata_sups.sups.length;i++){
var y = 0;  //该供应商的总订单数
for(var j=0;j<jdata_sups.sups[i].factorys.length;j++){
y+= jdata_sups.sups[i].factorys[j].orders;
}
orders[i] = y;
total_order+=y;
}
for(var i=0;i<jdata_sups.sups.length;i++){
var percent =Math.round( orders[i]*100/total_order );

sups[i] = {'name':jdata_sups.sups[i].sup_name,'x':orders[i],'y':percent,'sup_id':jdata_sups.sups[i].sup_id};
}
//这里是圆饼图，一共就只有一个饼，所以series只有一个，就是series[0]，对于圆饼图来说这里是固定的。
SupplyChart.series[0].setData(sups);
//设置标题
var pie_text = '<p style="color:#7f8c8d;font-size:62px;">' + total_order +'</p>'+
'<br/><p style="color:#999;font-size:20px;font-weight:normal;">Total<br/><span style="font-size:12px;color:#999;">(order)</pan></p>';
var pie_title = {'text':pie_text,align:"center",verticalAlign:"middle",y:10,};
SupplyChart.setTitle( pie_title);
//给supplier图表对象额外增加一个值。把jdata_sups传给对象，方便点击对象的时候，从这里边取得工厂的数据
SupplyChart.mydata=jdata_sups.sups;
//左边画完之后，默认给右边画第一个。
draw_factory_coverage(SupplyChart.mydata,SupplyChart.mydata[0].sup_id);
}

上边的两个例子，我都做了详尽的注释，基本上看一遍API，再过一遍例子，就能够很快学会这个插件了。以后需要的时候如果忘记了，再来回顾，也希望能帮到有需要的小伙伴们

(●’ω’●)丿❤