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.

138 lines
3.9 KiB

6 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. var ranges = [
  13. [1246406400000, 14.3, 27.7],
  14. [1246492800000, 14.5, 27.8],
  15. [1246579200000, 15.5, 29.6],
  16. [1246665600000, 16.7, 30.7],
  17. [1246752000000, 16.5, 25.0],
  18. [1246838400000, 17.8, 25.7],
  19. [1246924800000, 13.5, 24.8],
  20. [1247011200000, 10.5, 21.4],
  21. [1247097600000, 9.2, 23.8],
  22. [1247184000000, 11.6, 21.8],
  23. [1247270400000, 10.7, 23.7],
  24. [1247356800000, 11.0, 23.3],
  25. [1247443200000, 11.6, 23.7],
  26. [1247529600000, 11.8, 20.7],
  27. [1247616000000, 12.6, 22.4],
  28. [1247702400000, 13.6, 19.6],
  29. [1247788800000, 11.4, 22.6],
  30. [1247875200000, 13.2, 25.0],
  31. [1247961600000, 14.2, 21.6],
  32. [1248048000000, 13.1, 17.1],
  33. [1248134400000, 12.2, 15.5],
  34. [1248220800000, 12.0, 20.8],
  35. [1248307200000, 12.0, 17.1],
  36. [1248393600000, 12.7, 18.3],
  37. [1248480000000, 12.4, 19.4],
  38. [1248566400000, 12.6, 19.9],
  39. [1248652800000, 11.9, 20.2],
  40. [1248739200000, 11.0, 19.3],
  41. [1248825600000, 10.8, 17.8],
  42. [1248912000000, 11.8, 18.5],
  43. [1248998400000, 10.8, 16.1]
  44. ],
  45. averages = [
  46. [1246406400000, 21.5],
  47. [1246492800000, 22.1],
  48. [1246579200000, 23],
  49. [1246665600000, 23.8],
  50. [1246752000000, 21.4],
  51. [1246838400000, 21.3],
  52. [1246924800000, 18.3],
  53. [1247011200000, 15.4],
  54. [1247097600000, 16.4],
  55. [1247184000000, 17.7],
  56. [1247270400000, 17.5],
  57. [1247356800000, 17.6],
  58. [1247443200000, 17.7],
  59. [1247529600000, 16.8],
  60. [1247616000000, 17.7],
  61. [1247702400000, 16.3],
  62. [1247788800000, 17.8],
  63. [1247875200000, 18.1],
  64. [1247961600000, 17.2],
  65. [1248048000000, 14.4],
  66. [1248134400000, 13.7],
  67. [1248220800000, 15.7],
  68. [1248307200000, 14.6],
  69. [1248393600000, 15.3],
  70. [1248480000000, 15.3],
  71. [1248566400000, 15.8],
  72. [1248652800000, 15.2],
  73. [1248739200000, 14.8],
  74. [1248825600000, 14.4],
  75. [1248912000000, 15],
  76. [1248998400000, 13.6]
  77. ];
  78. $('#container').highcharts({
  79. title: {
  80. text: 'July temperatures'
  81. },
  82. xAxis: {
  83. type: 'datetime'
  84. },
  85. yAxis: {
  86. title: {
  87. text: null
  88. }
  89. },
  90. tooltip: {
  91. crosshairs: true,
  92. shared: true,
  93. valueSuffix: '°C'
  94. },
  95. legend: {
  96. },
  97. series: [{
  98. name: 'Temperature',
  99. data: averages,
  100. zIndex: 1,
  101. marker: {
  102. fillColor: 'white',
  103. lineWidth: 2,
  104. lineColor: Highcharts.getOptions().colors[0]
  105. }
  106. }, {
  107. name: 'Range',
  108. data: ranges,
  109. type: 'arearange',
  110. lineWidth: 0,
  111. linkedTo: ':previous',
  112. color: Highcharts.getOptions().colors[0],
  113. fillOpacity: 0.3,
  114. zIndex: 0
  115. }]
  116. });
  117. });
  118. </script>
  119. </head>
  120. <body>
  121. <script src="../../js/highcharts.js"></script>
  122. <script src="../../js/highcharts-more.js"></script>
  123. <script src="../../js/modules/exporting.js"></script>
  124. <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
  125. </body>
  126. </html>