Highcharts使用指南

统计分析报表Highcharts使用指南

一、前言（Preface）阅览本文，您可以了解：
1、Highcharts使用方法
2、Highcharts数据动态加载
3、Highcharts自动刷新数据
4、Highcharts常用模板
二、引用Highcharts的JS

1. <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
2. <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/4.0.1/highcharts.js"></script>
3.                 <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/4.0.1/modules/exporting.js"></script>

复制代码

三、静态图表示例

1. var chart1; // 全局变量
2. $(document).ready(function() {
3.       chart1 = new Highcharts.Chart({
4.         chart: {
5.             renderTo: 'container',
6.             type: 'bar'
7.         },
8.         title: {
9.             text: 'Fruit Consumption'
10.         },
11.         xAxis: {
12.             categories: ['Apples', 'Bananas', 'Oranges']
13.         },
14.         yAxis: {
15.             title: {
16.               text: 'Fruit eaten'
17.             }
18.         },
19.         series: [{
20.             name: 'Jane',
21.             data: [1, 0, 4]
22.         }, {
23.             name: 'John',
24.             data: [5, 7, 3]
25.         }]
26.       });
27.   });

复制代码

四、动态图表示例(动态加载数据)(1)定义基本的初始的参数

1. var options = {
2.     chart: {
3.         renderTo: 'container',
4.         defaultSeriesType: 'column'
5.     },
6.     title: {
7.         text: 'Fruit Consumption'
8.     },
9.     xAxis: {
10.         categories: []
11.     },
12.     yAxis: {
13.         title: {
14.             text: 'Units'
15.         }
16.     },
17.     series: []
18. };

复制代码

(2)动态加入数据

1. $("#b1").click(function(){
2.         var ddate={
3.                 name: 'China',
4.                 data: [Math.random()*10, Math.random()*10, Math.random()*10]
5.         };
6.         options.series.push(ddate);
7.         var chart = new Highcharts.Chart(options);
8. });

复制代码

五、自动刷新

1. function requestData() {
2.     $.ajax({
3.         url: '',
4.         success: function(data) {
5.             var series = chart.series[0],
6.                 shift = series.data.length > 20; // shift if the series is longer than 20
8.             // add the point
9.             chart.series[0].addPoint(point, true, shift);
10.            
11.             // call it again after one second
12.             setTimeout(requestData, 1000);   
13.         },
14.         cache: false
15.     });
16. }

复制代码

六、常用模板(1)折线图

1. var options  = {
2.         chart: {
3.                 renderTo: 'container',
4.                 type: 'line',
5.                 marginRight: 130,
6.                 marginBottom: 25
7.         },
8.         title: {
9.                 text: 'Monthly Average Temperature',
10.                 x: -20 //center
11.         },
12.         subtitle: {
13.                 text: 'Source: WorldClimate.com',
14.                 x: -20
15.         },
16.         xAxis: {
17.                 categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
18.                         'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
19.         },
20.         yAxis: {
21.                 title: {
22.                         text: 'Temperature (°C)'
23.                 },
24.                 plotLines: [{
25.                         value: 0,
26.                         1,
27.                         color: '#808080'
28.                 }]
29.         },
30.         tooltip: {
31.                 formatter: function() {
32.                                 return '<b>'+ this.series.name +'</b><br/>'+
33.                                 this.x +': '+ this.y +'°C';
34.                 }
35.         },
36.         legend: {
37.                 layout: 'vertical',
38.                 align: 'right',
39.                 verticalAlign: 'top',
40.                 x: -10,
41.                 y: 100,
42.                 borderWidth: 0
43.         },
44.         series: []
45. };

复制代码

调用方法：

1. $("#b1").click(function(){
2.         var chart = new Highcharts.Chart(options);//或者 $('#container').highcharts(options);
3. });

复制代码

(2)柱状图

1. var options={
2.         chart: {
3.             type: 'column'
4.         },
5.         title: {
6.             text: 'Monthly Average Rainfall'
7.         },
8.         subtitle: {
9.             text: 'Source: WorldClimate.com'
10.         },
11.         xAxis: {
12.             categories: [
13.                 'Jan',
14.                 'Feb',
15.                 'Mar',
16.                 'Apr',
17.                 'May',
18.                 'Jun',
19.                 'Jul',
20.                 'Aug',
21.                 'Sep',
22.                 'Oct',
23.                 'Nov',
24.                 'Dec'
25.             ]
26.         },
27.         yAxis: {
28.             min: 0,
29.             title: {
30.                 text: 'Rainfall (mm)'
31.             }
32.         },
33.         tooltip: {
34.             headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
35.             pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
36.                 '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
37.             footerFormat: '</table>',
38.             shared: true,
39.             useHTML: true
40.         },
41.         plotOptions: {
42.             column: {
43.                 pointPadding: 0.2,
44.                 borderWidth: 0
45.             }
46.         },
47.         series: [{
48.             name: 'Tokyo',
49.             data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
51.         }, {
52.             name: 'New York',
53.             data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
55.         }, {
56.             name: 'London',
57.             data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
59.         }, {
60.             name: 'Berlin',
61.             data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
63.         }]
64.     }

复制代码

调用方法：

1. $("#b1").click(function(){
2.         $('#container').highcharts(options);
3. });

复制代码

(3)饼图

1. var options  = {
2.         chart: {
3.             plotBackgroundColor: null,
4.             plotBorderWidth: null,
5.             plotShadow: false
6.         },
7.         title: {
8.                 text: 'Monthly Average Temperature',
9.                 x: -20 //center
10.         },
11.         subtitle: {
12.                 text: 'Source: WorldClimate.com',
13.                 x: -20
14.         },
15.         tooltip: {
16.                 pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
17.         },
18.     plotOptions: {
19.         pie: {
20.             allowPointSelect: true,
21.             cursor: 'pointer',
22.             dataLabels: {
23.                 enabled: true,
24.                 color: '#000000',
25.                 connectorColor: '#000000',
26.                 format: '<b>{point.name}</b>: {point.percentage:.1f} %'
27.             }
28.         }
29.     },
30.     series: [{
31.         type: 'pie',
32.         name: 'Browser share',
33.         data: [
34.             ['Firefox',  45.0],
35.             ['IE',      26.8],
36.             {
37.                 name: 'Chrome',
38.                 y: 12.8,
39.                 sliced: true,
40.                 selected: true
41.             },
42.             ['Safari',    8.5],
43.             ['Opera',    6.2],
44.             ['Others',  0.7]
45.         ]
46.     }]
47. };

复制代码

调用方法：

1. $("#b1").click(function(){
2.         $('#container').highcharts(options);
3. });

复制代码