index.htm 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  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. #container {
  9. height: 400px;
  10. min-width: 310px;
  11. max-width: 800px;
  12. margin: 0 auto;
  13. }
  14. </style>
  15. <script type="text/javascript">
  16. $(function () {
  17. $('#container').highcharts({
  18. chart: {
  19. type: 'column',
  20. options3d: {
  21. enabled: true,
  22. alpha: 15,
  23. beta: 15,
  24. viewDistance: 25,
  25. depth: 40
  26. }
  27. },
  28. title: {
  29. text: 'Total fruit consumption, grouped by gender'
  30. },
  31. xAxis: {
  32. categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
  33. },
  34. yAxis: {
  35. allowDecimals: false,
  36. min: 0,
  37. title: {
  38. text: 'Number of fruits'
  39. }
  40. },
  41. tooltip: {
  42. headerFormat: '<b>{point.key}</b><br>',
  43. pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y} / {point.stackTotal}'
  44. },
  45. plotOptions: {
  46. column: {
  47. stacking: 'normal',
  48. depth: 40
  49. }
  50. },
  51. series: [{
  52. name: 'John',
  53. data: [5, 3, 4, 7, 2],
  54. stack: 'male'
  55. }, {
  56. name: 'Joe',
  57. data: [3, 4, 4, 2, 5],
  58. stack: 'male'
  59. }, {
  60. name: 'Jane',
  61. data: [2, 5, 6, 2, 1],
  62. stack: 'female'
  63. }, {
  64. name: 'Janet',
  65. data: [3, 0, 4, 4, 3],
  66. stack: 'female'
  67. }]
  68. });
  69. });
  70. </script>
  71. </head>
  72. <body>
  73. <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
  74. <script src="http://cdn.hcharts.cn/highcharts/highcharts-3d.js"></script>
  75. <script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>
  76. <div id="container" style="height: 400px"></div>
  77. </body>
  78. </html>