You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

188 lines
5.3 KiB

8 years ago
  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://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.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="../../js/highcharts.js"></script>
  137. <script src="../../js/modules/data.js"></script>
  138. <script src="../../js/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>