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.   

20.              labels: {    

21.                  rotation: -45, //字體傾斜    

22.                  align: 'right',    

23.                  style: { font: 'normal 12px 宋體' }    

24.              }    

25.          },    

26.          yAxis: {//Y軸顯示文字    

27.              title: {    

28.                  text: 'MW'    

29.              }    

30.          },    

31.          tooltip: {    

32.              enabled: true,    

33.              formatter: function() {    

34.                  return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + Highcharts.numberFormat(this.y, 1);    

35.              }    

36.          },    

37.          plotOptions: {    

38.              line: {    

39.                  dataLabels: {    

40.                      enabled: true    

41.                  },    

42.                  enableMouseTracking: true//是否顯示title    

43.              }    

44.          },    

45.          series: [{    

46.              name: '1號機組',    

47.              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]    

48.          },{    

49.              name: '2號機組',    

50.              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]    

51.          }]    

52.          });    

53.          function getForm(){     

54.              $.ajax({    

55.                  type: "POST",     //要用post方式         

56.                  url: "WebServiceFH.asmx/GetLoadEveryHourByOne",           

57.                  contentType: "application/json",    

58.                  data: {},    

59.                  dataType: "json",    

60.                  success: function (data) {      

61.                      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"]];     

62.                      chart.series[0].setData(data);     

63.                  },    

64.                  error: function (err) {     

65.                      alert("讀取數據出錯！");    

66.                  }    

67.              });      

68.              $.ajax({    

69.                  type: "POST",     //要用post方式         

70.                  url: "WebServiceFH.asmx/GetLoadEveryHourByTwo",           

71.                  contentType: "application/json",     

72.                  dataType: "json",    

73.                  success: function (data) {      

74.                      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"]];     

75.                      chart.series[1].setData(data);       

76.                  },    

77.                  error: function (err) {     

78.                      alert("讀取數據出錯！");    

79.                  }    

80.              });     

81.          }    

82.          $(document).ready(function() {      

83.              //每隔3秒自動調用方法，實現圖表的實時更新     

84.              getForm();    

85.              window.setInterval(getForm,600000);       

86.          });    

87. });  

此處注意：

[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程序設計有所幫助。