图表展示插件Highcharts

最近在公司做一些大数据统计的一些工作，展示数据需要用到图表，比如折线图、坐标图、柱状图。找了几个插件以后，发现Highcharts特别简单，显示UI优雅，逼格高，而且据说是支持IE6+和移动端的。阿里云的数据展示似乎也用的这个插件。果断记录一下，直接上代码！

加载js：

1
2<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript" src="./highcharts.js"></script>

创建显示区域：

1<div id="container" style="height: 400px; margin: 0 auto"></div>

前方高能，主要的js部分代码如下：

这样就会在创建的div#container中绘制出图表，至于颜色、图表xy轴的最大宽高都不是你要考虑的事情，Highcharts会自动给你绘制好，基本如下图，点击底部的项目，是可以在图表中隐藏/显示这个项目的。

代码中的categories后面的值

1[01,02,03,04,05,06,07]

实际上就是x轴的项目，我目前写的是日期，当然json可以改成['周一','周二','周三'....]也是可以的。 valueSuffix是每个值的单位，series中就是数据源。比如categories的日期有7个成员，这里的每一个数据源也应该有7个值，在js里按照如图的格式写上就行了。 实际开发中，数据源的值应该是动态显示的，不会直接写死在js的代码中，比如php中，

1$data = array(1,2,3,4,5,6,7);

在上面的js中，可以这么写

1
2
3
4series: [{
            name: '新增用户',
            data: [<?php echo implode(',', $data); ?>]
        }]

这样，html代码执行的时候，js读取到的数据，就是[1,2,3,4,5,6,7]， 当然后端代码也可以这么写：

1
2
3
4series: [{
            name: '新增用户',
            data: <?php echo json_encode($data); ?>
        }]

饼图的效果是这样，加载的js和html创建的div不用修改，直接修改js：

这样就出来了如下的饼图~~

Highcharts还支持柱状图、散点图、3D图等各种闻所未闻的图，还可以根据ajax加载数据，反正我懒得贴代码了，直接去中文网可以看demo并且获取代码：传送门