数据呈现&图表插件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,//背景色
        plotBor