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.

129 lines
3.5 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 Weather Data for 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[2]
  32. }
  33. },
  34. title: {
  35. text: 'Temperature',
  36. style: {
  37. color: Highcharts.getOptions().colors[2]
  38. }
  39. },
  40. opposite: true
  41. }, { // Secondary yAxis
  42. gridLineWidth: 0,
  43. title: {
  44. text: 'Rainfall',
  45. style: {
  46. color: Highcharts.getOptions().colors[0]
  47. }
  48. },
  49. labels: {
  50. format: '{value} mm',
  51. style: {
  52. color: Highcharts.getOptions().colors[0]
  53. }
  54. }
  55. }, { // Tertiary yAxis
  56. gridLineWidth: 0,
  57. title: {
  58. text: 'Sea-Level Pressure',
  59. style: {
  60. color: Highcharts.getOptions().colors[1]
  61. }
  62. },
  63. labels: {
  64. format: '{value} mb',
  65. style: {
  66. color: Highcharts.getOptions().colors[1]
  67. }
  68. },
  69. opposite: true
  70. }],
  71. tooltip: {
  72. shared: true
  73. },
  74. legend: {
  75. layout: 'vertical',
  76. align: 'left',
  77. x: 80,
  78. verticalAlign: 'top',
  79. y: 55,
  80. floating: true,
  81. backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
  82. },
  83. series: [{
  84. name: 'Rainfall',
  85. type: 'column',
  86. yAxis: 1,
  87. 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],
  88. tooltip: {
  89. valueSuffix: ' mm'
  90. }
  91. }, {
  92. name: 'Sea-Level Pressure',
  93. type: 'spline',
  94. yAxis: 2,
  95. data: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7],
  96. marker: {
  97. enabled: false
  98. },
  99. dashStyle: 'shortdot',
  100. tooltip: {
  101. valueSuffix: ' mb'
  102. }
  103. }, {
  104. name: 'Temperature',
  105. type: 'spline',
  106. 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],
  107. tooltip: {
  108. valueSuffix: ' °C'
  109. }
  110. }]
  111. });
  112. });
  113. </script>
  114. </head>
  115. <body>
  116. <script src="../../js/highcharts.js"></script>
  117. <script src="../../js/modules/exporting.js"></script>
  118. <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
  119. </body>
  120. </html>