index.htm 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title>Highcharts Example</title>
  7. <style type="text/css">
  8. #container {
  9. min-width: 300px;
  10. max-width: 800px;
  11. height: 300px;
  12. margin: 1em auto;
  13. }
  14. #csv {
  15. display: none;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <script src="../../code/highcharts.js"></script>
  21. <script src="../../code/modules/windbarb.js"></script>
  22. <script src="../../code/modules/exporting.js"></script>
  23. <div id="container"></div>
  24. <script type="text/javascript">
  25. // Construct the chart
  26. Highcharts.chart('container', {
  27. title: {
  28. text: 'Highcharts Wind Barbs'
  29. },
  30. xAxis: {
  31. type: 'datetime',
  32. offset: 40
  33. },
  34. plotOptions: {
  35. series: {
  36. pointStart: Date.UTC(2017, 0, 29),
  37. pointInterval: 36e5
  38. }
  39. },
  40. series: [{
  41. type: 'windbarb',
  42. data: [
  43. [9.8, 177.9],
  44. [10.1, 177.2],
  45. [11.3, 179.7],
  46. [10.9, 175.5],
  47. [9.3, 159.9],
  48. [8.8, 159.6],
  49. [7.8, 162.6],
  50. [5.6, 186.2],
  51. [6.8, 146.0],
  52. [6.4, 139.9],
  53. [3.1, 180.2],
  54. [4.3, 177.6],
  55. [5.3, 191.8],
  56. [6.3, 173.1],
  57. [7.7, 140.2],
  58. [8.5, 136.1],
  59. [9.4, 142.9],
  60. [10.0, 140.4],
  61. [5.3, 142.1],
  62. [3.8, 141.0],
  63. [3.3, 116.5],
  64. [1.5, 327.5],
  65. [0.1, 1.1],
  66. [1.2, 11.1]
  67. ],
  68. name: 'Wind',
  69. color: Highcharts.getOptions().colors[1],
  70. showInLegend: false,
  71. tooltip: {
  72. valueSuffix: ' m/s'
  73. }
  74. }, {
  75. type: 'area',
  76. keys: ['y', 'rotation'], // rotation is not used here
  77. data: [
  78. [9.8, 177.9],
  79. [10.1, 177.2],
  80. [11.3, 179.7],
  81. [10.9, 175.5],
  82. [9.3, 159.9],
  83. [8.8, 159.6],
  84. [7.8, 162.6],
  85. [5.6, 186.2],
  86. [6.8, 146.0],
  87. [6.4, 139.9],
  88. [3.1, 180.2],
  89. [4.3, 177.6],
  90. [5.3, 191.8],
  91. [6.3, 173.1],
  92. [7.7, 140.2],
  93. [8.5, 136.1],
  94. [9.4, 142.9],
  95. [10.0, 140.4],
  96. [5.3, 142.1],
  97. [3.8, 141.0],
  98. [3.3, 116.5],
  99. [1.5, 327.5],
  100. [0.1, 1.1],
  101. [1.2, 11.1]
  102. ],
  103. color: Highcharts.getOptions().colors[0],
  104. fillColor: {
  105. linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
  106. stops: [
  107. [0, Highcharts.getOptions().colors[0]],
  108. [
  109. 1,
  110. Highcharts.color(Highcharts.getOptions().colors[0])
  111. .setOpacity(0.25).get()
  112. ]
  113. ]
  114. },
  115. name: 'Wind speed',
  116. tooltip: {
  117. valueSuffix: ' m/s'
  118. }
  119. }]
  120. });
  121. </script>
  122. </body>
  123. </html>