数据呈现图表插件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为他的divtype:"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，再过一遍例子，就能够很快学会这个插件了。以后需要的时候如果忘记了，再来回顾，也希望能帮到有需要的小伙伴们

(●’ω’●)丿❤