jQuery Highcharts折线图案例分析

Highcharts是一款功能非常强大的jQuery图表应用，利用Highcharts可以创建很多外观漂亮而且数据展示灵活的网页图表。本文主要介绍了利用Highcharts实现的折线图，并将部分代码分享给大家。

效果图如下所示：

js脚本引用：

[html] view plaincopy

1. <script src="Js/Index/jquery-1.5.2.min.js" type="text/javascript"></script>
2. <script src="js/Index/raphael.2.1.0.min.js" type="text/javascript"></script>
3. <script src="js/Index/justgage.1.0.1.js" type="text/javascript"></script>
4. <script src="Js/Index/highcharts.js" type="text/javascript"></script>
5. <script src="Js/Index/exporting.js" type="text/javascript"></script>

定时刷新：

[javascript] view plaincopy

1. //曲线图
2. ar chart;
3. $(document).ready(function() {
4. chart = new Highcharts.Chart({
5. chart: {
6. renderTo: ‘divChart‘,          //放置图表的容器
7. plotBackgroundColor: null,
8. plotBorderWidth: null,
9. defaultSeriesType: ‘line‘
10. },
11. title: {
12. text: ‘24小时负荷曲线‘
13. },
14. subtitle: {
15. text: ‘‘
16. },
17. xAxis: {//X轴数据
18. categories: [‘00‘,‘01‘, ‘02‘,‘03‘, ‘04‘,‘05‘, ‘06‘,‘07‘, ‘08‘,‘09‘, ‘10‘,‘11‘, ‘12‘,‘13‘, ‘14‘,‘15‘, ‘16‘,‘17‘, ‘18‘,‘19‘, ‘20‘,‘21‘, ‘22‘,‘23‘],
19. labels: {
20. rotation: -45, //字体倾斜
21. align: ‘right‘,
22. style: { font: ‘normal 12px 宋体‘ }
23. }
24. },
25. yAxis: {//Y轴显示文字
26. title: {
27. text: ‘MW‘
28. }
29. },
30. tooltip: {
31. enabled: true,
32. formatter: function() {
33. return ‘<b>‘ + this.x + ‘</b><br/>‘ + this.series.name + ‘: ‘ + Highcharts.numberFormat(this.y, 1);
34. }
35. },
36. plotOptions: {
37. line: {
38. dataLabels: {
39. enabled: true
40. },
41. enableMouseTracking: true//是否显示title
42. }
43. },
44. series: [{
45. name: ‘1号机组‘,
46. data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
47. },{
48. name: ‘2号机组‘,
49. data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
50. }]
51. });
52. function getForm(){
53. $.ajax({
54. type: "POST",     //要用post方式
55. url: "WebServiceFH.asmx/GetLoadEveryHourByOne",
56. contentType: "application/json",
57. data: {},
58. dataType: "json",
59. success: function (data) {
60. var data = [data["Load0"],data["Load1"],data["Load2"],data["Loa<a href="/content/317488.html" target="_blank">D3</a>"],data["Load4"],data["Load5"],data["Load6"],data["Load7"],data["Load8"],data["Load9"],data["Load10"],data["Load11"],data["Load12"],data["Load13"],data["Load14"],data["Load15"],data["Load16"],data["Load17"],data["Load18"],data["Load19"],data["Load20"],data["Load21"],data["Load22"],data["Load23"]];
61. chart.series[0].setData(data);
62. },
63. error: function (err) {
64. alert("读取数据出错！");
65. }
66. });
67. $.ajax({
68. type: "POST",     //要用post方式
69. url: "WebServiceFH.asmx/GetLoadEveryHourByTwo",
70. contentType: "application/json",
71. dataType: "json",
72. success: function (data) {
73. var data = [data["Load0"],data["Load1"],data["Load2"],data["Load3"],data["Load4"],data["Load5"],data["Load6"],data["Load7"],data["Load8"],data["Load9"],data["Load10"],data["Load11"],data["Load12"],data["Load13"],data["Load14"],data["Load15"],data["Load16"],data["Load17"],data["Load18"],data["Load19"],data["Load20"],data["Load21"],data["Load22"],data["Load23"]];
74. chart.series[1].setData(data);
75. },
76. error: function (err) {
77. alert("读取数据出错！");
78. }
79. });
80. }
81. $(document).ready(function() {
82. //每隔3秒自动调用方法，实现图表的实时更新
83. getForm();
84. window.setInterval(getForm,600000);
85. });
86. });

此处注意：

[javascript] view plaincopy

1. var data = [data["Load0"],data["Load1"],data["Load2"],data["Load3"],data["Load4"],data["Load5"],data["Load6"],data["Load7"],data["Load8"],data["Load9"],data["Load10"],data["Load11"],data["Load12"],data["Load13"],data["Load14"],data["Load15"],data["Load16"],data["Load17"],data["Load18"],data["Load19"],data["Load20"],data["Load21"],data["Load22"],data["Load23"]];
2. chart.series[0].setData(data);

body中只需要：

[html] view plaincopy

1. <div id="divChart"> </div>

希望本文所述对大家的jQuery程序设计有所帮助。