80ea6add2e7ad0d760f1cc968be9b9a865a755fb.svn-base 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  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. // 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="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
  75. <script src="http://cdn.hcharts.cn/highcharts/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>