Highcharts一些属性

上传人：5*** IP属地：湖北上传时间：2021-12-13 格式：DOCX 页数：22 大小：26.18KB 积分：30 举报 版权申诉

已阅读5页，还剩17页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、Highcharts一些属性1. <% page language="java" contentType="text/html; charset=UTF-8" 2. pageEncoding="UTF-8"%> 3. <!DOCTYPE html PUBLIC "-/W3C/DTD HTML 4.01 Transiti

2、onal/EN" "/TR/html4/loose.dtd"> 4. <html> 5. <head> 6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7. <title>Highcharts Demo</

3、title> 8. <script type="text/javascript" src="js/jquery.min.js"></script> 9. <script type="text/javascript" src="js/highcharts.js"></script> 10. <script type="text/jav

4、ascript" src="js/piled.js"></script> 11. <script type="text/javascript"> 12. var chart; 13. $(document).ready(function() 14. chart = new Highcharts.Chart(&#

5、160; 15. chart: 16. renderTo: 'container',/设置显示图表的容器 17. type:

6、 'line',/设置图表样式，可以为line,spline, scatter, splinearea bar,pie,area,column 18. / defaultSeriesType: 'column', /图表的默认样式 19. /

7、0; margin:21, 23, 24, 54,/整个图表的位置(上下左右的空隙) 20. marginRight: 200,/右边间距 21. marginBottom: 25/底部间距/空隙

8、 22. / inverted: false,/可选，控制显示方式，默认上下正向显示 23. / shadow:true,/外框阴影 24. / backgroundColor:&q

9、uot;#FFF", 25. / animation:true, 26. / borderColor:"#888", 27. / borderRadi

10、us:5, 28. / borderWidth:1, 29. / ignoreHiddenSeries:true, 30. / reflow:true, 31

11、. / plotBorderWidth:1, 32. / alignTicks:true 33. , 34.

12、0;labels:/在报表上显示的一些文本 35. items: 36. html:'本图表数据有误，仅用于说明相应的属性', 37.

13、; style:left:'100px',top:'60px' 38. , 39.

14、; html:'40. style:left:'100px',top:'100px' 41. 42.

15、60; , 43. credits:/右下角的文本 44. enabled: true, 45.

16、0; position: /位置设置 46. align: 'right', 47. x: -10, &#

17、160;48. y: -10 49. , 50. href:

18、60;"",/点击文本时的链接 51. style: 52. color:'blue' 53.

19、60; , 54. text: "Highcharts Demo"/显示的内容 55. , 56. /

20、; plotOptions:/绘图线条控制 57. / spline: 58. / allowPointSelect :true,/是否允许选中点 59. /

21、 animation:true,/是否在显示图表的时候使用动画 60. / cursor:'pointer',/鼠标移到图表上时鼠标的样式 61. /

22、; dataLabels: 62. / enabled :true,/是否在点的旁边显示数据 63. / &

23、#160; rotation:0 64. / , 65. /

24、0; enableMouseTracking:true,/鼠标移到图表上时是否显示提示框 66. / events:/监听点的鼠标事件 67. /

25、60; click: function() 68. / 69. / &

26、#160; , 70. / marker: 71. / enabled:true,/是否显示点

27、 72. / radius:3,/点的半径 73. / fillColor:&q

28、uot;#888" 74. / lineColor:"#000" 75. /

29、0; symbol: 'url(76. / states: 77. / &

30、#160; hover: 78. / enabled:true/鼠标放上去点是否放大 79. /

31、0; , 80. /

32、0; select: 81. /

33、0; enabled:false/控制鼠标选中点时候的状态 82. / 83. /

34、0; 84. / , 85. / states: 86. /

35、; hover: 87. / enabled:true,/鼠标放上

36、去线的状态控制 88. / lineWidth:3 89. / &#

37、160; 90. / , 91. / stickyTracking:true,/跟踪 92. /

38、; visible:true, 93. / lineWidth:2/线条粗细 94. / &#

39、160; pointStart:100, 95. / 96. / , 97. 98. title:

40、0; 99. text: 'Monthly Average Temperature',/标题 100. x: -20 /center设置标题的位置 101.

41、; , 102. subtitle: 103. text: 'Source: WorldC',/副标题 104. &

42、#160; x: -20/副标题位置 105. , 106. xAxis: /横轴的数据 107. categories

43、: 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 108. 'Jul', 'Aug', 'Sep', 'O

44、ct', 'Nov', 'Dec' 109. / lineWidth:1,/纵轴一直为空所对应的轴，即X轴 110. / plotLines: /一条竖线 111. /

45、 color: '#FF0000', 112. / width: 2, 113. /

46、0; value: 5.5 114. / 115. / labels: /设置横轴坐标的显示样式 116. /

47、 rotation: -45,/倾斜度 117. / align: 'right', 118. / style:

48、60;119. / font: 'normal 13px Verdana, sans-serif' 120. / &#

49、160; color: 'white' 121. / 122. / 123. 124. &

50、#160; , 125. yAxis: 126. / tickInterval: 200, /自定义刻度 127. / max:1000,/纵轴的最

51、大值 128. / min: 0,/纵轴的最小值 129. title: /纵轴标题 130.

52、 text: '百分数' 131. , 132. labels : 133. &

53、#160; formatter : function() /设置纵坐标值的样式 134. return this.value + '%' 135.

54、; 136. , 137. plotLines: &#

55、160; 138. value: 0, 139. width: 1, 140. &

56、#160; color: '#808080' 141. 142. , 143.

57、0; tooltip: /鼠标移到图形上时显示的提示框 144. formatter: function() 145.

58、;return '<b>'+ +'</b><br/>'+ 146. this.x +': '+ this.y +'Â°C&

59、#39; 147. 148. / crosshairs:/控制十字线 149. / width:1,&#

60、160; 150. / color:"#CCC", 151. / dashStyle:"longdash" 152. /

61、60; 153. 154. , 155. legend: /方框所在的位置(不知道怎么表达) 156.

62、layout: 'vertical', 157. align: 'right', 158. verticalAlign: 'top', 159.

63、; x: -10, 160. y: 100, 161. borderWidth: 0 162. &

64、#160; , 163. series: /以下为纵轴数据 164. name: 'Tokyo', 165.

65、60; data: 7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6 166. , 167.

66、0; name: 'New York', 168. data: -0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5

67、169. , 170. name: 'Berlin', 171. data: -0.9, 0.6, 3.

68、5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0 172. , 173. name: 'London', 174

69、. data: 3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8 175. 176. &#

70、160; ); 177. ); 178. </script> 179. </head> 180. <body> 181. <div id="container" ></div> 182. </body> 183. </html> 属性说明【部

71、分】一.chart的部分相关属性说明 renderTo: 'container', /图表的页面显示容器(也就是要显示到的div) defaultSeriesType: 'line', /图表类型(line、spline、scatter、splinearea、bar、pie、area、column) marginRight: 50,&#

72、160; /上下左右空隙(图表跟图框之间) marginBottom: 60, /下面空隙如果不够大，图例说明有可能看不到 plotBackgroundImage: './graphics/skies.jpg', /(图表的)背景图

73、片 plotBackgroundColor: /背景颜色 width: 1000, /图框（最外层）宽(默认800) height: 500,

74、 /图框高(默认500) backgroundColor: "red" /图框的背景颜色 borderColor: "red"

75、; /图框的边框颜色 borderRadius: 5, /图框的圆角大小 borderWidth: 9, /图框的边框大小 inverted: false,

76、 /(使图)倒置 plotBorderColor: "red", /图表的边框颜色 plotBorderWidth: 0, /图表的边框大小

77、60;plotShadow: false, /图表是否使用阴影效果 reflow: false, shadow:true /图框是否使用阴影

78、 showAxes: false, /是否最初显示轴 spacingTop: 100, /图表上方的空白 spacingRight: 10, s

79、pacingBottom: 15, spacingLeft: 10, colors: . /图上线。的颜色二. credits的部分相关属性说明 credits: /设置右下角的标记。 (这个也可以在highcharts.js里中修改)&

80、#160; /enabled: true, /是否显示 position: /显示的位置 &

81、#160; align: 'left',

82、60;x: 10 , text: "", &#

83、160; /显示的文字 style: /样式

84、; cursor: 'pointer', color: 'red', fontSize: '20px' ,

85、; href: '', /路径 ,三. title的部分相关属性说明 title: /标题 text: '月份平均温度', x: -20,

86、0; /center /水平偏移量 y: 100 /y:垂直偏移量

87、 align: 'right' /水平方向（left, right, bottom, top） floating: true, /是否浮动显示

88、60; margin: 15, style: , /样式 verticalAlign: "left" /垂直方向（left

89、, right, bottom, top） ,四. xAxis或者YAxis的部分相关属性说明 categories: '一月', '二月', /allowDecimals: false /alternateGridColor: 'red' /在图表中相隔出现纵向的颜色格栅

90、 /dateTimeLabelFormats: , /endOnTick: false, /是否显示控制轴末端的一个cagegories出来 /events: /setExtremes: /,

91、; /gridLineColor: "red", /纵向格线的颜色 /gridLineDashStyle: Solid /纵向格栅线条的类型 /gridLineWidth: 5, &#

92、160; /纵向格线的的大小 /id: null, /labels: /X轴的标签（下面的说明） /align: "center",

93、 /位置 /enabled: false, /是否显示 /formatter: , /rota

94、tion: 90, /旋转,效果就是影响标签的显示方向 /staggerLines: 4, /标签的交错显示（上、下）

95、0; /step: 2, /标签的相隔显示的步长 /style:, /x: 10

96、0, /偏移量，默认两个都是0， /y: 40 /, /lineCo

97、lor: "red", /X轴的颜色 /lineWidth: 5, /X轴的宽度 /

98、linkedTo:1, /opposite: true /是否把标签显示到对面 /max: 12, &#

99、160; /显示的最大值 /maxPadding: 6, /maxZoom: 1, /min: 10, &

100、#160;/显示的最小值 /minorGridLineColor: 'red', /副格线的颜色 /minorGridLineDashStyle: 'blod', /副格线的的颜色 /minorGridLineWidth: 50,

101、;/副格线的宽度 /minorTickColor: #A0A0A0, /?没有看出效果 minorTickInterval:3, /副标记的间隔 /minorTickLength: 10,&

102、#160; /副标记的长度 /minorTickPosition: 'inside', /副标记的位置 /minorTickWidth: 5,

103、60; /副标记的宽 /minPadding: 0.01, /offset: 0, /坐标轴跟图的距离 /plotBands: /使某数据块显示不同的效果

104、 /plotLines: /标线属性 /value: 0, /值为0的标线 /,

105、 /tickmarkPlacement: "on", /标记(文字)显示的位置，on表示在正对位置上。 /reversed: true, /是否倒置 /showFirstLabel: false, /第一个标记的数值是否显示

106、0; /startOfWeek: 2, /tickColor: 'blue', /标记(坐标的记号)的颜色 /tickInterval: 20, /标记(坐标的记号)的步长 /tickLe

107、ngth: 5, /tickmarkPlacement: "on", /tickPixelInterval: 1000, /两坐标之间的宽度 /tickPosition: "inside", /坐标标记的方向 /title:

108、; /设置坐标标题的相关属性 /margin: 40, /rotation: 90, /text: "Y-values",

109、; /align: "middle", /enabled: "middle", /style: color: 'red' /, /type: "linear"五.toolti

110、p的部分相关属性说明 tooltip: /提示框设置 formatter: function() /格式化提示框的内容样式 return '<b>'+ +

111、9;</b><br/>'+ this.x +': '+ this.y +'°C' , &

112、#160; backgroundColor: '#CCCCCC', /背景颜色 /borderColor: '#FCFFC5' /边框颜色

113、60; /borderRadius: 2 /边框的圆角大小 borderWidth: 3, /边框宽度(大小)

114、60; /enabled: false, /是否显示提示框 /shadow: false, /提示框是否

115、应用阴影 ?没有看出明显效果? /shared: true, /当打开这个属性，鼠标几个某一区域的时候，如果有多条线，所有的线上的据点都会有响应(ipad) /snap: 0,

116、 /没有看出明显效果? crosshairs: /交叉点是否显示的一条纵线 &

117、#160; width: 2, color: 'gray', dashStyle: 'shortdot' &

118、#160; style: /提示框内容的样式 color: 'white', padding: '10px', /内边距

119、 (这个会常用到) fontSize: '9pt', ,六.legend(图例说明)的部分相关属性说明 leg

120、end: /图例说明 /layout: 'vertical', /图例说明布局（垂直显示,默认横向显示） align: 'center', /图例说明的显示位置

121、0; /verticalAlign: 'top', /纵向的位置 /x: 250, /偏移量 /y:

122、 0, borderWidth: 1, /边框宽度 /backgroundColor: &

123、#39;red' /背景颜色 borderColor: 'red', /borderRadius /边框圆角

124、0;/enabled: false /是否显示图例说明 /floating:true /是否浮动显示(效果就是会不会显示到图中) /itemHiddenStyle:

125、 color: 'red', /itemHoverStyle: color: 'red' /鼠标放到某一图例说明上，文字颜色的变化颜色 /itemStyle: color: 'red' /图例说明的样式

126、 /itemWidth: /图例说明的宽度 /labelFormatter: function() return this.value /?默认(return this.nam

127、e) /lineHeight: 1000 /没看出明显效果 /margin: 20 /reversed:true &#

128、160; /图例说明的顺序（是否反向） /shadow:true /阴影

129、60;/style: color:'black' /symbolPadding: 100 /标志（线）跟文字的距离 /symbolWidth: 100

130、0; /标志的宽 /width:100 ,七. plotOptions的部分修改属性说明 plotOptions: (我这个是在柱形图上做的测试) column: /柱形图 &#

131、160; /pointPadding: 0.2, /borderWidth: 1, /柱子边框的大小&

132、#160; /borderColor: "red", /柱子边框的颜色 /borderRadius: 180,

133、0; /柱子两端的圆角的半径 /colorByPoint: true, /否应该接受每系列的一种颜色或每点一种颜色

134、groupPadding: 0, /每一组柱子之间的间隔(会影响到柱子的大小) /minPointLength: 0, /最小

135、数据值那一条柱子的长度(如果是0，可能看不到，可以设置出来) /pointPadding: 0.1, /柱子之间的间隔(会影响到柱子的大小) /pointWidth: 2,&

136、#160; /柱子的大小(会影响到柱子的大小) /allowPointSelect: false, /animation: t

137、rue, /图形出来时候的动画 /color: 'red', /柱子的颜色

138、 /connectNulls: false, /连接图表是否忽略零点(如线形图，数据为0是是否忽略) /cursor: '',

139、0; /?游标 /dashStyle: null, dataLabels: /图上是否显示数据标签 &#

140、160; /enabled: true, align: "center", /color: 'red',

141、; formatter: function() return this.y + 'mm'

142、0; , rotation: 270, /staggerLines: 0, /step: ,

143、 /style: , /x: 0, /y: -6 , &#

144、160; /enableMouseTracking: events: /事件 click: function(event) &#

145、160; alert(); , &#

146、160; /checkboxClick: , /hide: , /legendItemClick: , /mouseOver: ,

147、; /mouseOut: , /show: , /id:

148、 null, /lineWidth: 20, /marker: /图例说明上的标志 /enabled: false

149、 /, point: /图上的数据点(这个在线形图可能就直观) events:

150、; click: function() alert(this.y);

151、0; , /mouseOver: , /mouseOu

152、t: , /remove: , /select: ,

153、 /unselect: , /update: , &

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

Highcharts一些属性

文档简介

温馨提示

最新文档

评论

Highcharts一些属性

文档简介

温馨提示

最新文档

评论

相关文档