index.htm 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  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: 320px;
  10. max-width: 600px;
  11. margin: 0 auto;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  17. <script src="../../code/highcharts.js"></script>
  18. <script src="../../code/highcharts-more.js"></script>
  19. <script src="../../code/modules/exporting.js"></script>
  20. <div id="container"></div>
  21. <button id="plain">Plain</button>
  22. <button id="inverted">Inverted</button>
  23. <button id="polar">Polar</button>
  24. <script type="text/javascript">
  25. var chart = Highcharts.chart('container', {
  26. title: {
  27. text: 'Chart.update'
  28. },
  29. subtitle: {
  30. text: 'Plain'
  31. },
  32. xAxis: {
  33. categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  34. },
  35. series: [{
  36. type: 'column',
  37. colorByPoint: true,
  38. data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
  39. showInLegend: false
  40. }]
  41. });
  42. $('#plain').click(function () {
  43. chart.update({
  44. chart: {
  45. inverted: false,
  46. polar: false
  47. },
  48. subtitle: {
  49. text: 'Plain'
  50. }
  51. });
  52. });
  53. $('#inverted').click(function () {
  54. chart.update({
  55. chart: {
  56. inverted: true,
  57. polar: false
  58. },
  59. subtitle: {
  60. text: 'Inverted'
  61. }
  62. });
  63. });
  64. $('#polar').click(function () {
  65. chart.update({
  66. chart: {
  67. inverted: false,
  68. polar: true
  69. },
  70. subtitle: {
  71. text: 'Polar'
  72. }
  73. });
  74. });
  75. </script>
  76. </body>
  77. </html>