Highcharts屬性

1. Highcharts.setOptions({global:{useUTC : false}});  

2. $(function(){    

3.     //聲明報表對象    

4.     var chart = new Highcharts.Chart({    

5.         chart: {  

6.         renderTo: 'container', // 報表顯示在 頁面位置 container 爲 div 定義的屬性  

7.         defaultSeriesType: 'spline', // 定義報表類型 例如：line ，spline ，colume  

8.         events: {  

9.                 load:  getForm  //調用js 方法  

10.             }  

11.         },  

12.         title:{  

13.             text:'實時監測曲線圖" //定義曲線報表 名稱  

14.         },  

15.         xAxis: {  

16.             type: 'datetime', // 定義時間軸的 類型  

17.             maxPadding : 0.05,  

18.             minPadding : 0.05,  

19.             tickWidth:1,//刻度的寬度  

20.             lineWidth :1,//自定義x軸寬度  

21.             gridLineWidth :1,//默認是0，即在圖上沒有縱軸間隔線  

22.             lineColor : '#990000'     

23.         },  

24.         yAxis: {  

25.                 max:12, // 定義Y軸 最大值  

26.                 min:0, // 定義最小值  

27.                 minPadding: 0.2,   

28.                 maxPadding: 0.2,  

29.                 tickInterval:1, // 刻度值  

30.                 title: {  

31.                     text: 'PH值'  

32.                 },  

33.                 // plotLines 表示爲定義曲線報表中的 （刻度線）或者叫作（定義的區間範圍）  

34. // 一下爲2條表示線  

35.                 plotLines: [{   

36.                             value: 6,  

37.                             color: 'green',  

38.                             dashStyle: 'shortdash',  

39.                             width: 2,  

40.                             label: {  

41.                                 text: '正常'  

42.                             }  

43.                         },{  

44.                             value: 8,  

45.                             color: 'green',  

46.                             dashStyle: 'shortdash',  

47.                             width: 2,  

48.                             label: {  

49.                                 text: '正常'  

50.                             }  

51.                         }  

52.                 }]  

53.         },  

54.         tooltip: {  // 表示爲 鼠標放在報表圖中數據點上顯示的數據信息  

55.             formatter: function() {  

56.                   return '<b>'+'日期:' +'</b>'  

57. +Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+  

58.                    '<b>'+'<%=lbname%>:' +'</b>'+ this.y+'  <%=shll%>';  

59.             }  

60.         },  

61.         series: [{  

62.             name: 'PH',  

63.             data: [] // 此處存放數據值 用,分開 例如：1.8,8.9,null,9.2,   若是在某一點數據爲空    

64. //能夠用null 來表示   

65.             //若是是想動態扶植  這個位置 應該爲空 即：data: []  

66.         }]  

67.     });    

68.     // 與後臺進行數據交互  

69.     function getForm(){    

70.         jQuery.getJSON("test!test.do?id=123456", null, function(data) {     

71.             //爲圖表設置值     

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

73.         });       

74.     }    

75.     //定時刷新 列表數據  

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

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

78.        window.setInterval(getForm,50000);     

79.    });    

80. });  

81.   

82. //定義 曲線報表圖 的樣式  

83.     Highcharts.theme = {  

84.        colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655',  

85.  '#FFF263', '#6AF9C4'],  

86.        chart: {  

87.           backgroundColor: {  

88.              linearGradient: [0, 0, 500, 500],  

89.              stops: [  

90.                 [0, 'rgb(255, 255, 255)'],  

91.                 [1, 'rgb(240, 240, 255)']  

92.              ]  

93.           },  

94.           borderWidth: 2,  

95.           plotBackgroundColor: 'rgba(255, 255, 255, .9)',  

96.           plotShadow: true,  

97.           plotBorderWidth: 1  

98.        },  

99.        title: {  

100.           style: {   

101.              color: '#000',  

102.              font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'  

103.           }  

104.        },  

105.        subtitle: {  

106.           style: {   

107.              color: '#666666',  

108.              font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'  

109.           }  

110.        },  

111.        xAxis: {  

112.           gridLineWidth: 1,  

113.           lineColor: '#000',  

114.           tickColor: '#000',  

115.           labels: {  

116.              style: {  

117.                 color: '#000',  

118.                 font: '11px Trebuchet MS, Verdana, sans-serif'  

119.              }  

120.           },  

121.           title: {  

122.              style: {  

123.                 color: '#333',  

124.                 fontWeight: 'bold',  

125.                 fontSize: '12px',  

126.                 fontFamily: 'Trebuchet MS, Verdana, sans-serif'  

127.   

128.              }              

129.           }  

130.        },  

131.        yAxis: {  

132.           //minorTickInterval: 'auto'  // 此處會在Y軸座標2點以前出現小格  因此就沒有使用。  

133.        },  

134.        legend: {  

135.           itemStyle: {           

136.              font: '9pt Trebuchet MS, Verdana, sans-serif',  

137.              color: 'black'  

138.           },  

139.           itemHoverStyle: {  

140.              color: '#039'  

141.           },  

142.           itemHiddenStyle: {  

143.              color: 'gray'  

144.           }  

145.        },  

146.        labels: {  

147.           style: {  

148.              color: '#99b'  

149.           }  

150.        }  

151.     };  

152.     var highchartsOptions = Highcharts.setOptions(Highcharts.theme); 

153. 經常使用的文檔說明：
     
     1.chart：
     renderTo 圖表的頁面顯示容器
     defaultSeriesType 圖表的顯示類型（line,spline, scatter, splinearea bar,pie,area,column）
     margin 上下左右空隙
     events 事件
     click function(e) {}
     load function(e) {}
     
     2.xAxis：yAxis:
     屬性：
     gridLineColor 網格顏色
     reversed 是否反向 true ,false
     gridLineWidth 網格粗細
     startOnTick 是否從座標線開始畫圖區域
     endOnTick 是否從座標線結束畫圖區域
     tickmarkPlacement 座標值與座標線標記的對齊方式on,between
     tickPosition 座標線標記的樣式 向內延伸仍是向外延伸(insidel,outside)
     tickPixelInterval 決定着橫座標的密度
     tickColor 座標線標記的顏色
     tickWidth 座標線標記的寬度
     lineColor 基線顏色
     lineWidth 基線寬度
     max 固定座標最大值
     min 固定座標最小值
     plotlines 標線屬性
     maxZoom
     minorGridLineColor
     minorGridLineWidth
     /minorTickColor
     title： 
     enabled： 是否顯示
     text： 座標名稱
     Labels 座標軸值顯示類 默認：defaultLabelOptions
     formatter 格式化函數
     enabled 是否顯示座標軸的座標值
     rotation 傾斜角度
     align 與座標線的水平相對位置
     x 水平偏移量
     y 垂直偏移量
     style 
     font 字體樣式 默認defaultFont
     color 顏色

154. 
     3.Tooltip 數據點的提示框
     enabled 鼠標通過時是否可動態呈現true,false
     formatter 格式化提示框的內容樣式
     
     4.plotOptions 畫各類圖表的數據點的設置
     defaultOptions 默認設置
     屬性
     Area類:
     lineWidth 線寬度
     fillColor area的填充顏色組
     marker{} 設置動態屬性
     shadow 是否陰影 true,false
     states 設置狀態？
     Line類
     dataLabels: 數據顯示類
     enabled 是否直接顯示點的數據true,false

155. 5.seriesname 該條曲線名稱data[] 該條曲線的數據項addPoint([x,y],redraw,cover) 添加描點，redraw 是否重畫，cover是否左移setData: function(data, redraw) 從新設置Data數組，redraw是否重畫remove: function(redraw) 刪除曲線redraw: function() 重畫曲線marker ：enabled 是否顯示描點