index.htm 1.9 KB

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