index.htm 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  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: 'pie'
  16. },
  17. title: {
  18. text: 'Browser market shares. January, 2015 to May, 2015'
  19. },
  20. subtitle: {
  21. text: 'Click the slices to view versions. Source: netmarketshare.com.'
  22. },
  23. plotOptions: {
  24. series: {
  25. dataLabels: {
  26. enabled: true,
  27. format: '{point.name}: {point.y:.1f}%'
  28. }
  29. }
  30. },
  31. tooltip: {
  32. headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
  33. pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
  34. },
  35. series: [{
  36. name: 'Brands',
  37. colorByPoint: true,
  38. data: [{
  39. name: 'Microsoft Internet Explorer',
  40. y: 56.33,
  41. drilldown: 'Microsoft Internet Explorer'
  42. }, {
  43. name: 'Chrome',
  44. y: 24.03,
  45. drilldown: 'Chrome'
  46. }, {
  47. name: 'Firefox',
  48. y: 10.38,
  49. drilldown: 'Firefox'
  50. }, {
  51. name: 'Safari',
  52. y: 4.77,
  53. drilldown: 'Safari'
  54. }, {
  55. name: 'Opera',
  56. y: 0.91,
  57. drilldown: 'Opera'
  58. }, {
  59. name: 'Proprietary or Undetectable',
  60. y: 0.2,
  61. drilldown: null
  62. }]
  63. }],
  64. drilldown: {
  65. series: [{
  66. name: 'Microsoft Internet Explorer',
  67. id: 'Microsoft Internet Explorer',
  68. data: [
  69. ['v11.0', 24.13],
  70. ['v8.0', 17.2],
  71. ['v9.0', 8.11],
  72. ['v10.0', 5.33],
  73. ['v6.0', 1.06],
  74. ['v7.0', 0.5]
  75. ]
  76. }, {
  77. name: 'Chrome',
  78. id: 'Chrome',
  79. data: [
  80. ['v40.0', 5],
  81. ['v41.0', 4.32],
  82. ['v42.0', 3.68],
  83. ['v39.0', 2.96],
  84. ['v36.0', 2.53],
  85. ['v43.0', 1.45],
  86. ['v31.0', 1.24],
  87. ['v35.0', 0.85],
  88. ['v38.0', 0.6],
  89. ['v32.0', 0.55],
  90. ['v37.0', 0.38],
  91. ['v33.0', 0.19],
  92. ['v34.0', 0.14],
  93. ['v30.0', 0.14]
  94. ]
  95. }, {
  96. name: 'Firefox',
  97. id: 'Firefox',
  98. data: [
  99. ['v35', 2.76],
  100. ['v36', 2.32],
  101. ['v37', 2.31],
  102. ['v34', 1.27],
  103. ['v38', 1.02],
  104. ['v31', 0.33],
  105. ['v33', 0.22],
  106. ['v32', 0.15]
  107. ]
  108. }, {
  109. name: 'Safari',
  110. id: 'Safari',
  111. data: [
  112. ['v8.0', 2.56],
  113. ['v7.1', 0.77],
  114. ['v5.1', 0.42],
  115. ['v5.0', 0.3],
  116. ['v6.1', 0.29],
  117. ['v7.0', 0.26],
  118. ['v6.2', 0.17]
  119. ]
  120. }, {
  121. name: 'Opera',
  122. id: 'Opera',
  123. data: [
  124. ['v12.x', 0.34],
  125. ['v28', 0.24],
  126. ['v27', 0.17],
  127. ['v29', 0.16]
  128. ]
  129. }]
  130. }
  131. });
  132. });
  133. </script>
  134. </head>
  135. <body>
  136. <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
  137. <script src="http://cdn.hcharts.cn/highcharts/modules/data.js"></script>
  138. <script src="http://cdn.hcharts.cn/highcharts/modules/drilldown.js"></script>
  139. <div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto"></div>
  140. <!-- Data from www.netmarketshare.com. Select Browsers => Desktop share by version. Download as tsv. -->
  141. <pre id="tsv" style="display:none">Browser Version Total Market Share
  142. Microsoft Internet Explorer 8.0 26.61%
  143. Microsoft Internet Explorer 9.0 16.96%
  144. Chrome 18.0 8.01%
  145. Chrome 19.0 7.73%
  146. Firefox 12 6.72%
  147. Microsoft Internet Explorer 6.0 6.40%
  148. Firefox 11 4.72%
  149. Microsoft Internet Explorer 7.0 3.55%
  150. Safari 5.1 3.53%
  151. Firefox 13 2.16%
  152. Firefox 3.6 1.87%
  153. Opera 11.x 1.30%
  154. Chrome 17.0 1.13%
  155. Firefox 10 0.90%
  156. Safari 5.0 0.85%
  157. Firefox 9.0 0.65%
  158. Firefox 8.0 0.55%
  159. Firefox 4.0 0.50%
  160. Chrome 16.0 0.45%
  161. Firefox 3.0 0.36%
  162. Firefox 3.5 0.36%
  163. Firefox 6.0 0.32%
  164. Firefox 5.0 0.31%
  165. Firefox 7.0 0.29%
  166. Proprietary or Undetectable 0.29%
  167. Chrome 18.0 - Maxthon Edition 0.26%
  168. Chrome 14.0 0.25%
  169. Chrome 20.0 0.24%
  170. Chrome 15.0 0.18%
  171. Chrome 12.0 0.16%
  172. Opera 12.x 0.15%
  173. Safari 4.0 0.14%
  174. Chrome 13.0 0.13%
  175. Safari 4.1 0.12%
  176. Chrome 11.0 0.10%
  177. Firefox 14 0.10%
  178. Firefox 2.0 0.09%
  179. Chrome 10.0 0.09%
  180. Opera 10.x 0.09%
  181. Microsoft Internet Explorer 8.0 - Tencent Traveler Edition 0.09%</pre>
  182. </body>
  183. </html>