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
7. // add the point
8. chart.series[0].addPoint(point, true, shift);
9. // call it again after one second
10. setTimeout(requestData, 1000);
11. },
12. cache: false
13. });
14. }

复制代码

六、常用模板(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. width: 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]
50. }, {
51. name: 'New York',
52. 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]
53. }, {
54. name: 'London',
55. 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]
56. }, {
57. name: 'Berlin',
58. 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]
59. }]
60. }

复制代码

调用方法：

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. });

复制代码