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.

92 lines
2.1 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. #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. marginTop: 80,
  28. marginRight: 40
  29. },
  30. title: {
  31. text: 'Total fruit consumption, grouped by gender'
  32. },
  33. xAxis: {
  34. categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
  35. },
  36. yAxis: {
  37. allowDecimals: false,
  38. min: 0,
  39. title: {
  40. text: 'Number of fruits'
  41. }
  42. },
  43. tooltip: {
  44. headerFormat: '<b>{point.key}</b><br>',
  45. pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y} / {point.stackTotal}'
  46. },
  47. plotOptions: {
  48. column: {
  49. stacking: 'normal',
  50. depth: 40
  51. }
  52. },
  53. series: [{
  54. name: 'John',
  55. data: [5, 3, 4, 7, 2],
  56. stack: 'male'
  57. }, {
  58. name: 'Joe',
  59. data: [3, 4, 4, 2, 5],
  60. stack: 'male'
  61. }, {
  62. name: 'Jane',
  63. data: [2, 5, 6, 2, 1],
  64. stack: 'female'
  65. }, {
  66. name: 'Janet',
  67. data: [3, 0, 4, 4, 3],
  68. stack: 'female'
  69. }]
  70. });
  71. });
  72. </script>
  73. </head>
  74. <body>
  75. <script src="../../js/highcharts.js"></script>
  76. <script src="../../js/highcharts-3d.js"></script>
  77. <script src="../../js/modules/exporting.js"></script>
  78. <div id="container" style="height: 400px"></div>
  79. </body>
  80. </html>