JQuery图表插件——Highcharts

JQuery图表插件——Highcharts

因为项目中需要用到图表生成，所有Google了下，找到了这个插件，顺带写了个DEMO。点击跳转官网

先上三个图，分别是曲线、柱状、扇形。

图表中的数据纯属于DEMO的测试数据，没有实际用意。下面讲下大致的实现步骤

第一步，下载并且引用JS包（highcharts.js），theme顾名思义是放皮肤的。

可以下载DEMO逐一试试就知道效果怎么样了，上图就应用了两个样式。download中放的是打印和导出成图片的js文件（貌似是通过js上传到官网，然后再下载到本地），因为项目是放到内网的所以就没有用了。

第二步，实现，贴代码。

 1 var chart;
 2         $(document).ready(function() {
 3             chart = new Highcharts.Chart({
 4                 chart: {
 5                     renderTo: 'container',          //放置图表的容器
 6                     plotBackgroundColor: null,
 7                     plotBorderWidth: null,
 8                     defaultSeriesType: 'line'   
 9                 },
10                 title: {
11                     text: 'JQuery曲线图演示'
12                 },
13                 subtitle: {
14                     text: '副标题'
15                 },
16                 xAxis: {//X轴数据
17                     categories: ['一月份', '二月份', '三月份', '四月份', '五月份', '六月份', '七月份', '八月份', '九月份', '十月份', '十一月份', '十二月份'],
18                     labels: {
19                         rotation: -45, //字体倾斜
20                         align: 'right',
21                         style: { font: 'normal 13px 宋体' }
22                     }
23                 },
24                 yAxis: {//Y轴显示文字
25                     title: {
26                         text: '产量/百万'
27                     }
28                 },
29                 tooltip: {
30                     enabled: true,
31                     formatter: function() {
32                         return '' + this.x + '
' + this.series.name + ': ' + Highcharts.numberFormat(this.y, 1);
33                     }
34                 },
35                 plotOptions: {
36                     line: {
37                         dataLabels: {
38                             enabled: true
39                         },
40                         enableMouseTracking: true//是否显示title
41                     }
42                 },
43                 series: [{
44                     name: '杭州',
45                     data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
46                 }, {
47                     name: '江西',
48                     data: [4.0, 2.9, 5.5, 24.5, 18.4, 11.5, 35.2, 36.5, 23.3, 38.3, 23.9, 3.6]
49                 }, {
50                     name: '北京',
51                     data: [14.0, 12.9, 15.5, 14.5, 28.4, 21.5, 15.2, 16.5, 13.3, 28.3, 13.9, 13.6]
52                 }, {
53                     name: '湖南',
54                     data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
55 }]
56                 });
57             }); 

这写都是配置，最重要的就是series里面的数据了，如果需要从数据库中取出来的话，直接生成json然后赋值上去就OK了，效果很炫，还有动态感，感兴趣的朋友可以下载下来跑跑。

注意，DEMO里的download文件夹中的js文件，本来导出及打印的一些提示是英文，我已经修改成中文了，在引用js文件的时候需要 charset="gb2312"，具体DEMO中我已经写好了注释。好的，到此为止。下载地址