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.

87 lines
2.3 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. ${demo.css}
  9. </style>
  10. <script type="text/javascript">
  11. $(function () {
  12. $('#container').highcharts({
  13. title: {
  14. text: 'Combination chart'
  15. },
  16. xAxis: {
  17. categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
  18. },
  19. labels: {
  20. items: [{
  21. html: 'Total fruit consumption',
  22. style: {
  23. left: '50px',
  24. top: '18px',
  25. color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
  26. }
  27. }]
  28. },
  29. series: [{
  30. type: 'column',
  31. name: 'Jane',
  32. data: [3, 2, 1, 3, 4]
  33. }, {
  34. type: 'column',
  35. name: 'John',
  36. data: [2, 3, 5, 7, 6]
  37. }, {
  38. type: 'column',
  39. name: 'Joe',
  40. data: [4, 3, 3, 9, 0]
  41. }, {
  42. type: 'spline',
  43. name: 'Average',
  44. data: [3, 2.67, 3, 6.33, 3.33],
  45. marker: {
  46. lineWidth: 2,
  47. lineColor: Highcharts.getOptions().colors[3],
  48. fillColor: 'white'
  49. }
  50. }, {
  51. type: 'pie',
  52. name: 'Total consumption',
  53. data: [{
  54. name: 'Jane',
  55. y: 13,
  56. color: Highcharts.getOptions().colors[0] // Jane's color
  57. }, {
  58. name: 'John',
  59. y: 23,
  60. color: Highcharts.getOptions().colors[1] // John's color
  61. }, {
  62. name: 'Joe',
  63. y: 19,
  64. color: Highcharts.getOptions().colors[2] // Joe's color
  65. }],
  66. center: [100, 80],
  67. size: 100,
  68. showInLegend: false,
  69. dataLabels: {
  70. enabled: false
  71. }
  72. }]
  73. });
  74. });
  75. </script>
  76. </head>
  77. <body>
  78. <script src="../../js/highcharts.js"></script>
  79. <script src="../../js/modules/exporting.js"></script>
  80. <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
  81. </body>
  82. </html>