index.htm 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>Highcharts Example</title>
  6. <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
  7. <style type="text/css">
  8. ${demo.css}
  9. </style>
  10. <script type="text/javascript">
  11. $(function () {
  12. // Create the chart
  13. $('#container').highcharts({
  14. chart: {
  15. type: 'column'
  16. },
  17. title: {
  18. text: 'Browser market shares. January, 2015 to May, 2015'
  19. },
  20. subtitle: {
  21. text: 'Click the columns to view versions. Source: <a href="http://netmarketshare.com">netmarketshare.com</a>.'
  22. },
  23. xAxis: {
  24. type: 'category'
  25. },
  26. yAxis: {
  27. title: {
  28. text: 'Total percent market share'
  29. }
  30. },
  31. legend: {
  32. enabled: false
  33. },
  34. plotOptions: {
  35. series: {
  36. borderWidth: 0,
  37. dataLabels: {
  38. enabled: true,
  39. format: '{point.y:.1f}%'
  40. }
  41. }
  42. },
  43. tooltip: {
  44. headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
  45. pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
  46. },
  47. series: [{
  48. name: 'Brands',
  49. colorByPoint: true,
  50. data: [{
  51. name: 'Microsoft Internet Explorer',
  52. y: 56.33,
  53. drilldown: 'Microsoft Internet Explorer'
  54. }, {
  55. name: 'Chrome',
  56. y: 24.03,
  57. drilldown: 'Chrome'
  58. }, {
  59. name: 'Firefox',
  60. y: 10.38,
  61. drilldown: 'Firefox'
  62. }, {
  63. name: 'Safari',
  64. y: 4.77,
  65. drilldown: 'Safari'
  66. }, {
  67. name: 'Opera',
  68. y: 0.91,
  69. drilldown: 'Opera'
  70. }, {
  71. name: 'Proprietary or Undetectable',
  72. y: 0.2,
  73. drilldown: null
  74. }]
  75. }],
  76. drilldown: {
  77. series: [{
  78. name: 'Microsoft Internet Explorer',
  79. id: 'Microsoft Internet Explorer',
  80. data: [
  81. [
  82. 'v11.0',
  83. 24.13
  84. ],
  85. [
  86. 'v8.0',
  87. 17.2
  88. ],
  89. [
  90. 'v9.0',
  91. 8.11
  92. ],
  93. [
  94. 'v10.0',
  95. 5.33
  96. ],
  97. [
  98. 'v6.0',
  99. 1.06
  100. ],
  101. [
  102. 'v7.0',
  103. 0.5
  104. ]
  105. ]
  106. }, {
  107. name: 'Chrome',
  108. id: 'Chrome',
  109. data: [
  110. [
  111. 'v40.0',
  112. 5
  113. ],
  114. [
  115. 'v41.0',
  116. 4.32
  117. ],
  118. [
  119. 'v42.0',
  120. 3.68
  121. ],
  122. [
  123. 'v39.0',
  124. 2.96
  125. ],
  126. [
  127. 'v36.0',
  128. 2.53
  129. ],
  130. [
  131. 'v43.0',
  132. 1.45
  133. ],
  134. [
  135. 'v31.0',
  136. 1.24
  137. ],
  138. [
  139. 'v35.0',
  140. 0.85
  141. ],
  142. [
  143. 'v38.0',
  144. 0.6
  145. ],
  146. [
  147. 'v32.0',
  148. 0.55
  149. ],
  150. [
  151. 'v37.0',
  152. 0.38
  153. ],
  154. [
  155. 'v33.0',
  156. 0.19
  157. ],
  158. [
  159. 'v34.0',
  160. 0.14
  161. ],
  162. [
  163. 'v30.0',
  164. 0.14
  165. ]
  166. ]
  167. }, {
  168. name: 'Firefox',
  169. id: 'Firefox',
  170. data: [
  171. [
  172. 'v35',
  173. 2.76
  174. ],
  175. [
  176. 'v36',
  177. 2.32
  178. ],
  179. [
  180. 'v37',
  181. 2.31
  182. ],
  183. [
  184. 'v34',
  185. 1.27
  186. ],
  187. [
  188. 'v38',
  189. 1.02
  190. ],
  191. [
  192. 'v31',
  193. 0.33
  194. ],
  195. [
  196. 'v33',
  197. 0.22
  198. ],
  199. [
  200. 'v32',
  201. 0.15
  202. ]
  203. ]
  204. }, {
  205. name: 'Safari',
  206. id: 'Safari',
  207. data: [
  208. [
  209. 'v8.0',
  210. 2.56
  211. ],
  212. [
  213. 'v7.1',
  214. 0.77
  215. ],
  216. [
  217. 'v5.1',
  218. 0.42
  219. ],
  220. [
  221. 'v5.0',
  222. 0.3
  223. ],
  224. [
  225. 'v6.1',
  226. 0.29
  227. ],
  228. [
  229. 'v7.0',
  230. 0.26
  231. ],
  232. [
  233. 'v6.2',
  234. 0.17
  235. ]
  236. ]
  237. }, {
  238. name: 'Opera',
  239. id: 'Opera',
  240. data: [
  241. [
  242. 'v12.x',
  243. 0.34
  244. ],
  245. [
  246. 'v28',
  247. 0.24
  248. ],
  249. [
  250. 'v27',
  251. 0.17
  252. ],
  253. [
  254. 'v29',
  255. 0.16
  256. ]
  257. ]
  258. }]
  259. }
  260. });
  261. });
  262. </script>
  263. </head>
  264. <body>
  265. <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
  266. <script src="http://cdn.hcharts.cn/highcharts/modules/data.js"></script>
  267. <script src="http://cdn.hcharts.cn/highcharts/modules/drilldown.js"></script>
  268. <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
  269. </body>
  270. </html>