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.

83 lines
2.4 KiB

9 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. // Radialize the colors
  13. Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
  14. return {
  15. radialGradient: {
  16. cx: 0.5,
  17. cy: 0.3,
  18. r: 0.7
  19. },
  20. stops: [
  21. [0, color],
  22. [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
  23. ]
  24. };
  25. });
  26. // Build the chart
  27. $('#container').highcharts({
  28. chart: {
  29. plotBackgroundColor: null,
  30. plotBorderWidth: null,
  31. plotShadow: false,
  32. type: 'pie'
  33. },
  34. title: {
  35. text: 'Browser market shares. January, 2015 to May, 2015'
  36. },
  37. tooltip: {
  38. pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
  39. },
  40. plotOptions: {
  41. pie: {
  42. allowPointSelect: true,
  43. cursor: 'pointer',
  44. dataLabels: {
  45. enabled: true,
  46. format: '<b>{point.name}</b>: {point.percentage:.1f} %',
  47. style: {
  48. color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
  49. },
  50. connectorColor: 'silver'
  51. }
  52. }
  53. },
  54. series: [{
  55. name: "Brands",
  56. data: [
  57. {name: "Microsoft Internet Explorer", y: 56.33},
  58. {
  59. name: "Chrome",
  60. y: 24.03,
  61. sliced: true,
  62. selected: true
  63. },
  64. {name: "Firefox", y: 10.38},
  65. {name: "Safari", y: 4.77}, {name: "Opera", y: 0.91},
  66. {name: "Proprietary or Undetectable", y: 0.2}
  67. ]
  68. }]
  69. });
  70. });
  71. </script>
  72. </head>
  73. <body>
  74. <script src="../../js/highcharts.js"></script>
  75. <script src="../../js/modules/exporting.js"></script>
  76. <div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
  77. </body>
  78. </html>