Highcharts属性中英文参照

Highcharts属性中英文参照
1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2. <html>
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5. <title>Highcharts Demo</title>
6. <script type="text/javascript" src="js/jquery.min.js"></script>
7. <script type="text/javascript" src="js/highcharts.js"></script>
8. <script type="text/javascript" src="js/excanvas.compiled.js"></script>
9. <script type="text/javascript">
10. var chart;
11. $(document).ready(function() {
12. chart = new Highcharts.Chart({
13. chart: {
14. renderTo: 'container',//设置显示图表的容器
15. type: 'line',//设置图表样式，可以为line,spline, scatter, splinearea bar,pie,area,column
16. // defaultSeriesType: 'column', //图表的默认样式
17. // margin:[21, 23, 24, 54],//整个图表的位置(上下左右的空隙)
18. marginRight: 200,//右边间距
19. marginBottom: 25//底部间距/空隙
20. // inverted: false,//可选，控制显示方式，默认上下正向显示
21. // shadow:true,//外框阴影
22. // backgroundColor:"#FFF",
23. // animation:true,
24. // borderColor:"#888",
25. // borderRadius:5,
26. // borderWidth:1,
27. // ignoreHiddenSeries:true,
28. // reflow:true,
29. // plotBorderWidth:1,
30. // alignTicks:true,
31. zoomtype:'xy' //x轴y轴方向均可鼠标拖动放大
32. },
33. labels:{//在报表上显示的一些文本
34. items:[{
35. html:'本图表数据有误，仅用于说明相应的属性',
36. style:{left:'100px',top:'60px'}
37. }, {
38. html:'http://www.highcharts.com/demo',
39. style:{left:'100px',top:'100px'}
40. }]
41. },
42. credits:{//右下角的文本
43. enabled: true,
44. position: {//位置设置
45. align: 'right',
46. x: -10,
47. y: -10
48. },
49. href: "http://www.highcharts.com",//点击文本时的链接
50. style: {
51. color:'blue'
52. },
53. text: "Highcharts Demo"//显示的内容
54. },
55. // plotOptions:{//绘图线条控制
56. column: {//控制柱状宽度
57. pointPadding: 0.2,
58. borderWidth: 0,
59. pointWidth: 30
60. },
61. // spline:{
62. // allowPointSelect :true,//是否允许选中点
63. // animation:true,//是否在显示图表的时候使用动画
64. // cursor:'pointer',//鼠标移到图表上时鼠标的样式
65. // dataLabels:{
66. // enabled :true,//是否在点的旁边显示数据
67. // rotation:0
68. // },
69. // enableMouseTracking:true,//鼠标移到图表上时是否显示提示框
70. // events:{//监听点的鼠标事件
71. // click: function() {
72. // }
73. // },
74. // marker:{
75. // enabled:true,//是否显示点
76. // radius:3,//点的半径
77. // fillColor:"#888"
78. // lineColor:"#000"
79. // symbol: 'url(http://highcharts.com/demo/gfx/sun.png)',//设置点用图片来显示
80. // states:{
81. // hover:{
82. // enabled:true//鼠标放上去点是否放大
83. // },
84. // select:{
85. // enabled:false//控制鼠标选中点时候的状态
86. // }
87. // }
88. // },
89. // states:{
90. // hover:{
91. // enabled:true,//鼠标放上去线的状态控制
92. // lineWidth:3
93. // }
94. // },
95. // stickyTracking:true,//跟踪
96. // visible:true,
97. // lineWidth:2//线条粗细
98. // pointStart:100,
99. // }
100. // },
102. title: {
103. text: 'Monthly Average Temperature',//标题
104. x: -20 //center设置标题的位置
105. },
106. subtitle: {
107. text: 'Source: WorldClimate.com',//副标题
108. x: -20//副标题位置
109. },
110. xAxis: {//横轴的数据
111. categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
112. 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
113. // lineWidth:1,//纵轴一直为空所对应的轴，即X轴
114. // plotLines: [{//一条竖线
115. // color: '#FF0000',
116. // 2,
117. // value: 5.5
118. // }]
119. // labels: {//设置横轴坐标的显示样式
120. // rotation: -45,//倾斜度
121. // align: 'right',
122. // style: {
123. // font: 'normal 13px Verdana, sans-serif'
124. // color: 'white'
125. // }
126. // }
128. },
129. yAxis: { tickPixelInterval: 20, //两坐标之间的宽度
130. // tickInterval: 200, //自定义刻度
131. // offset:60, //把X轴的位置往右移动在highstock里面依然有效
132. // max:1000,//纵轴的最大值
133. // min: 0,//纵轴的最小值
134. title: {//纵轴标题
135. text: '百分数'
136. },
137. labels : {
138. formatter : function() {//设置纵坐标值的样式
139. return this.value + '%';
140. }
141. },
142. plotLines: [{
143. value: 0,
144. 1,
145. color: '#808080'
146. }]
147. },
148. tooltip: {//鼠标移到图形上时显示的提示框
149. formatter: function() {
150. return '<b>'+ this.series.name +'</b><br/>'+
151. this.x +': '+ this.y +'Â°C';
152. }
153. // crosshairs:[{//控制十字线
154. // 1,
155. // color:"#CCC",
156. // dashStyle:"longdash"
157. // }
159. },
160. legend: {//方框所在的位置(不知道怎么表达)
161. layout: 'vertical',
162. align: 'right',
163. verticalAlign: 'top',
164. x: -10,
165. y: 100,
166. borderWidth: 0
167. },
168. series: [{//以下为纵轴数据
169. name: 'Tokyo',
170. 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]
171. }, {
172. name: 'New York',
173. 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]
174. }, {
175. name: 'Berlin',
176. data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
177. }, {
178. name: 'London',
179. 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]
180. }]
181. });
182. });
183. </script>
184. </head>
185. <body>
186. <div id="container" ></div>
187. </body>
188. </html>
效果图类似于如下:
相关阅读:
Java 面试 --- 3
Java 面试-- 1
面试之痛 -- 二叉树前序中序后序
 java 事务
 深入理解mybatis
hibernate
mybatis 原理
 spring 原理
 spring aop
spring 事务
原文地址：https://www.cnblogs.com/ZDPPU/p/5993785.html