index.htm 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  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. <script type="text/javascript">
  8. $(function () {
  9. $('#container').highcharts({
  10. chart: {
  11. plotBackgroundColor: null,
  12. plotBorderWidth: null,
  13. plotShadow: false
  14. },
  15. title: {
  16. text: 'Browser market shares at a specific website, 2010'
  17. },
  18. tooltip: {
  19. pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
  20. },
  21. plotOptions: {
  22. pie: {
  23. allowPointSelect: true,
  24. cursor: 'pointer',
  25. dataLabels: {
  26. enabled: true,
  27. color: '#000000',
  28. connectorColor: '#000000',
  29. format: '<b>{point.name}</b>: {point.percentage:.1f} %'
  30. }
  31. }
  32. },
  33. series: [{
  34. type: 'pie',
  35. name: 'Browser share',
  36. data: [
  37. ['Firefox', 45.0],
  38. ['IE', 26.8],
  39. {
  40. name: 'Chrome',
  41. y: 12.8,
  42. sliced: true,
  43. selected: true
  44. },
  45. ['Safari', 8.5],
  46. ['Opera', 6.2],
  47. ['Others', 0.7]
  48. ]
  49. }]
  50. });
  51. });
  52. </script>
  53. </head>
  54. <body>
  55. <script src="../../js/highcharts.js"></script>
  56. <script src="../../js/modules/exporting.js"></script>
  57. <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
  58. </body>
  59. </html>