index.htm 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  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. <script type="text/javascript">
  8. $(function () {
  9. $('#container').highcharts({
  10. chart: {
  11. type: 'columnrange',
  12. inverted: true
  13. },
  14. title: {
  15. text: 'Temperature variation by month'
  16. },
  17. subtitle: {
  18. text: 'Observed in Vik i Sogn, Norway, 2009'
  19. },
  20. xAxis: {
  21. categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  22. },
  23. yAxis: {
  24. title: {
  25. text: 'Temperature ( °C )'
  26. }
  27. },
  28. tooltip: {
  29. valueSuffix: '°C'
  30. },
  31. plotOptions: {
  32. columnrange: {
  33. dataLabels: {
  34. enabled: true,
  35. formatter: function () {
  36. return this.y + '°C';
  37. }
  38. }
  39. }
  40. },
  41. legend: {
  42. enabled: false
  43. },
  44. series: [{
  45. name: 'Temperatures',
  46. data: [
  47. [-9.7, 9.4],
  48. [-8.7, 6.5],
  49. [-3.5, 9.4],
  50. [-1.4, 19.9],
  51. [0.0, 22.6],
  52. [2.9, 29.5],
  53. [9.2, 30.7],
  54. [7.3, 26.5],
  55. [4.4, 18.0],
  56. [-3.1, 11.4],
  57. [-5.2, 10.4],
  58. [-13.5, 9.8]
  59. ]
  60. }]
  61. });
  62. });
  63. </script>
  64. </head>
  65. <body>
  66. <script src="../../js/highcharts.js"></script>
  67. <script src="../../js/highcharts-more.js"></script>
  68. <script src="../../js/modules/exporting.js"></script>
  69. <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
  70. </body>
  71. </html>