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.

96 lines
2.7 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. chart: {
  14. zoomType: 'xy'
  15. },
  16. title: {
  17. text: 'Average Monthly Temperature and Rainfall in Tokyo'
  18. },
  19. subtitle: {
  20. text: 'Source: WorldClimate.com'
  21. },
  22. xAxis: [{
  23. categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
  24. 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  25. crosshair: true
  26. }],
  27. yAxis: [{ // Primary yAxis
  28. labels: {
  29. format: '{value}°C',
  30. style: {
  31. color: Highcharts.getOptions().colors[1]
  32. }
  33. },
  34. title: {
  35. text: 'Temperature',
  36. style: {
  37. color: Highcharts.getOptions().colors[1]
  38. }
  39. }
  40. }, { // Secondary yAxis
  41. title: {
  42. text: 'Rainfall',
  43. style: {
  44. color: Highcharts.getOptions().colors[0]
  45. }
  46. },
  47. labels: {
  48. format: '{value} mm',
  49. style: {
  50. color: Highcharts.getOptions().colors[0]
  51. }
  52. },
  53. opposite: true
  54. }],
  55. tooltip: {
  56. shared: true
  57. },
  58. legend: {
  59. layout: 'vertical',
  60. align: 'left',
  61. x: 120,
  62. verticalAlign: 'top',
  63. y: 100,
  64. floating: true,
  65. backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
  66. },
  67. series: [{
  68. name: 'Rainfall',
  69. type: 'column',
  70. yAxis: 1,
  71. data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
  72. tooltip: {
  73. valueSuffix: ' mm'
  74. }
  75. }, {
  76. name: 'Temperature',
  77. type: 'spline',
  78. data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
  79. tooltip: {
  80. valueSuffix: '°C'
  81. }
  82. }]
  83. });
  84. });
  85. </script>
  86. </head>
  87. <body>
  88. <script src="../../js/highcharts.js"></script>
  89. <script src="../../js/modules/exporting.js"></script>
  90. <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
  91. </body>
  92. </html>