Highcharts一些属性

1、Highcharts一些属性1. 3. 4. 5. 6. 7. HighchartsDemo8. 9. 10. 11. 12. varchart;13. $(document).ready(function()14. chart=newHighcharts.Chart(15. chart:16. renderTo:container,/设置显示图表的容器17. type:line,/设置图表样式，可以为line,spline,scatter,splineareabar,pie,area,column18. /defaultSeriesType:column,/图表的默认样式19. /margi

2、n:21,23,24,54,/整个图表的位置(上下左右的空隙)20. marginRight:200,/右边间距21. marginBottom:25/底部间距/空隙22. /inverted:false,/可选，控制显示方式，默认上下正向显示23. /shadow:true,/外框阴影24. /backgroundColor:#FFF,25. /animation:true,26. /borderColor:#888,27. /borderRadius:5,28. /borderWidth:1,29. /ignoreHiddenSeries:true,30. /reflow:true,31.

3、 /plotBorderWidth:1,32. /alignTicks:true33. ,34. labels:/在报表上显示的一些文本35. items:36. html:本图表数据有误，仅用于说明相应的属性,37. style:left:100px,top:60px38. ,39. html:40. style:left:100px,top:100px41. 42. ,43. credits:/右下角的文本44. enabled:true,45. position:/位置设置46. align:right,47. x:-10,48. y:-1049. ,50. href:,/点击文本时的链

4、接51. style:52. color:blue53. ,54. text:HighchartsDemo/显示的内容55. ,56. /plotOptions:/绘图线条控制57. /spline:58. /allowPointSelect:true,/是否允许选中点59. /animation:true,/是否在显示图表的时候使用动画60. /cursor:pointer,/鼠标移到图表上时鼠标的样式61. /dataLabels:62. /enabled:true,/是否在点的旁边显示数据63. /rotation:064. /,65. /enableMouseTracking:true

5、,/鼠标移到图表上时是否显示提示框66. /events:/监听点的鼠标事件67. /click:function()68. /69. /,70. /marker:71. /enabled:true,/是否显示点72. /radius:3,/点的半径73. /fillColor:#88874. /lineColor:#00075. /symbol:url(76. /states:77. /hover:78. /enabled:true/鼠标放上去点是否放大79. /,80. /select:81. /enabled:false/控制鼠标选中点时候的状态82. /83. /84. /,85. /

6、states:86. /hover:87. /enabled:true,/鼠标放上去线的状态控制88. /lineWidth:389. /90. /,91. /stickyTracking:true,/跟踪92. /visible:true,93. /lineWidth:2/线条粗细94. /pointStart:100,95. /96. /,97. 98. title:99. text:MonthlyAverageTemperature,/标题100. x:-20/center设置标题的位置101. ,102. subtitle:103. text:Source:WorldC,/副标题104

7、. x:-20/副标题位置105. ,106. xAxis:/横轴的数据107. categories:Jan,Feb,Mar,Apr,May,Jun,108. Jul,Aug,Sep,Oct,Nov,Dec109. /lineWidth:1,/纵轴一直为空所对应的轴，即X轴110. /plotLines:/一条竖线111. /color:#FF0000,112. /width:2,113. /value:5.5114. /115. /labels:/设置横轴坐标的显示样式116. /rotation:-45,/倾斜度117. /align:right,118. /style:119. /fo

8、nt:normal13pxVerdana,sans-serif120. /color:white121. /122. /123. 124. ,125. yAxis:126. /tickInterval:200,/自定义刻度127. /max:1000,/纵轴的最大值128. /min:0,/纵轴的最小值129. title:/纵轴标题130. text:百分数131. ,132. labels:133. formatter:function()/设置纵坐标值的样式134. returnthis.value+%;135. 136. ,137. plotLines:138. value:0,139

9、. width:1,140. color:#808080141. 142. ,143. tooltip:/鼠标移到图形上时显示的提示框144. formatter:function()145. return++146. this.x+:+this.y+C;147. 148. /crosshairs:/控制十字线149. /width:1,150. /color:#CCC,151. /dashStyle:longdash152. /153. 154. ,155. legend:/方框所在的位置(不知道怎么表达)156. layout:vertical,157. a

10、lign:right,158. verticalAlign:top,159. x:-10,160. y:100,161. borderWidth:0162. ,163. series:/以下为纵轴数据164. name:Tokyo,165. data:7.0,6.9,9.5,14.5,18.2,21.5,25.2,26.5,23.3,18.3,13.9,9.6166. ,167. name:NewYork,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.5169. ,170. name:Berlin,171. da

11、ta:-0.9,0.6,3.5,8.4,13.5,17.0,18.6,17.9,14.3,9.0,3.9,1.0172. ,173. name:London,174. data:3.9,4.2,5.7,8.5,11.9,15.2,17.0,16.6,14.2,10.3,6.6,4.8175. 176. );177. );178. 179. 180. 181. 182. 183. 属性说明【部分】一.chart的部分相关属性说明renderTo: container,/图表的页面显示容器(也就是要显示到的div)defaultSeriesType: line,/图表类型(line、spline、

12、scatter、splinearea、bar、pie、area、column)marginRight: 50,/上下左右空隙(图表跟图框之间)marginBottom: 60,/下面空隙如果不够大，图例说明有可能看不到plotBackgroundImage: ./graphics/skies.jpg, /(图表的)背景图片plotBackgroundColor:/背景颜色width: 1000,/图框（最外层）宽(默认800)height: 500,/图框高(默认500)backgroundColor: red/图框的背景颜色borderColor: red/图框的边框颜色borderRadi

13、us: 5,/图框的圆角大小borderWidth: 9,/图框的边框大小inverted: false,/(使图)倒置plotBorderColor: red,/图表的边框颜色plotBorderWidth: 0,/图表的边框大小plotShadow: false,/图表是否使用阴影效果reflow: false,shadow:true/图框是否使用阴影showAxes: false,/是否最初显示轴spacingTop: 100,/图表上方的空白spacingRight: 10,spacingBottom: 15,spacingLeft: 10,colors: ./图上线。的颜色二. cr

14、edits的部分相关属性说明credits:/设置右下角的标记。 (这个也可以在highcharts.js里中修改)/enabled: true,/是否显示position: /显示的位置align: left,x: 10,text: ,/显示的文字style:/样式cursor: pointer,color: red,fontSize: 20px,href: , /路径,三. title的部分相关属性说明title: /标题text: 月份平均温度,x: -20,/center /水平偏移量y: 100/y:垂直偏移量align: right/水平方向（left, right, bottom

15、, top）floating: true,/是否浮动显示margin: 15,style: ,/样式verticalAlign: left/垂直方向（left, right, bottom, top）,四. xAxis或者YAxis的部分相关属性说明categories: 一月, 二月,/allowDecimals: false/alternateGridColor: red/在图表中相隔出现纵向的颜色格栅/dateTimeLabelFormats: ,/endOnTick: false,/是否显示控制轴末端的一个cagegories出来/events: /setExtremes:/,/gri

16、dLineColor: red,/纵向格线的颜色/gridLineDashStyle: Solid/纵向格栅线条的类型/gridLineWidth: 5,/纵向格线的的大小/id: null,/labels: /X轴的标签（下面的说明）/align: center,/位置/enabled: false,/是否显示/formatter: ,/rotation: 90,/旋转,效果就是影响标签的显示方向/staggerLines: 4,/标签的交错显示（上、下）/step: 2,/标签的相隔显示的步长/style:,/x: 100,/偏移量，默认两个都是0，/y: 40/,/lineColor:

17、red,/X轴的颜色/lineWidth: 5,/X轴的宽度/linkedTo:1,/opposite: true/是否把标签显示到对面/max: 12,/显示的最大值/maxPadding: 6,/maxZoom: 1,/min: 10,/显示的最小值/minorGridLineColor: red,/副格线的颜色/minorGridLineDashStyle: blod, /副格线的的颜色/minorGridLineWidth: 50,/副格线的宽度/minorTickColor: #A0A0A0,/?没有看出效果minorTickInterval:3,/副标记的间隔/minorTickL

18、ength: 10,/副标记的长度/minorTickPosition: inside,/副标记的位置/minorTickWidth: 5,/副标记的宽/minPadding: 0.01,/offset: 0,/坐标轴跟图的距离/plotBands: /使某数据块显示不同的效果/plotLines: /标线属性/value: 0,/值为0的标线/,/tickmarkPlacement: on,/标记(文字)显示的位置，on表示在正对位置上。/reversed: true,/是否倒置/showFirstLabel: false,/第一个标记的数值是否显示/startOfWeek: 2,/tick

19、Color: blue,/标记(坐标的记号)的颜色/tickInterval: 20,/标记(坐标的记号)的步长/tickLength: 5,/tickmarkPlacement: on,/tickPixelInterval: 1000,/两坐标之间的宽度/tickPosition: inside,/坐标标记的方向/title: /设置坐标标题的相关属性/margin: 40,/rotation: 90,/text: Y-values,/align: middle,/enabled: middle,/style: color: red/,/type: linear五.tooltip的部分相关属

20、性说明tooltip: /提示框设置formatter: function() /格式化提示框的内容样式return + +this.x +: + this.y +C;,backgroundColor: #CCCCCC,/背景颜色/borderColor: #FCFFC5/边框颜色/borderRadius: 2/边框的圆角大小borderWidth: 3,/边框宽度(大小)/enabled: false,/是否显示提示框/shadow: false,/提示框是否应用阴影?没有看出明显效果?/shared: true,/当打开这个属性，鼠标几个某一区域的时候，

21、如果有多条线，所有的线上的据点都会有响应(ipad)/snap: 0,/没有看出明显效果?crosshairs: /交叉点是否显示的一条纵线width: 2,color: gray,dashStyle: shortdotstyle: /提示框内容的样式color: white,padding: 10px,/内边距 (这个会常用到)fontSize: 9pt,六.legend(图例说明)的部分相关属性说明legend: /图例说明/layout: vertical,/图例说明布局（垂直显示,默认横向显示）align: center,/图例说明的显示位置/verticalAlign: top, /

22、纵向的位置/x: 250,/偏移量/y: 0,borderWidth: 1,/边框宽度/backgroundColor: red/背景颜色borderColor: red,/borderRadius/边框圆角/enabled: false/是否显示图例说明/floating:true/是否浮动显示(效果就是会不会显示到图中)/itemHiddenStyle: color: red,/itemHoverStyle: color: red/鼠标放到某一图例说明上，文字颜色的变化颜色/itemStyle:color: red/图例说明的样式/itemWidth:/图例说明的宽度/labelForma

23、tter: function() return this.value/?默认(return )/lineHeight: 1000/没看出明显效果/margin: 20/reversed:true/图例说明的顺序（是否反向）/shadow:true/阴影/style: color:black/symbolPadding: 100/标志（线）跟文字的距离/symbolWidth: 100/标志的宽/width:100,七. plotOptions的部分修改属性说明plotOptions: (我这个是在柱形图上做的测试) column: /柱形图/pointPadding: 0.2

24、,/borderWidth: 1,/柱子边框的大小/borderColor: red,/柱子边框的颜色/borderRadius: 180,/柱子两端的圆角的半径/colorByPoint: true,/否应该接受每系列的一种颜色或每点一种颜色groupPadding: 0,/每一组柱子之间的间隔(会影响到柱子的大小)/minPointLength: 0,/最小数据值那一条柱子的长度(如果是0，可能看不到，可以设置出来)/pointPadding: 0.1,/柱子之间的间隔(会影响到柱子的大小)/pointWidth: 2,/柱子的大小(会影响到柱子的大小)/allowPointSelect:

25、 false,/animation: true,/图形出来时候的动画/color: red,/柱子的颜色/connectNulls: false,/连接图表是否忽略零点(如线形图，数据为0是是否忽略)/cursor: ,/?游标/dashStyle: null,dataLabels: /图上是否显示数据标签/enabled: true,align: center,/color: red,formatter: function()return this.y + mm,rotation: 270,/staggerLines: 0,/step: ,/style: ,/x: 0,/y: -6,/enableMouseTracking:events: /事件click: function(event)alert(t