index.htm 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  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://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
  7. <style type="text/css">
  8. #container, #sliders {
  9. min-width: 310px;
  10. max-width: 800px;
  11. margin: 0 auto;
  12. }
  13. #container {
  14. height: 400px;
  15. }
  16. </style>
  17. <script type="text/javascript">
  18. $(function () {
  19. // Set up the chart
  20. var chart = new Highcharts.Chart({
  21. chart: {
  22. renderTo: 'container',
  23. type: 'column',
  24. options3d: {
  25. enabled: true,
  26. alpha: 15,
  27. beta: 15,
  28. depth: 50,
  29. viewDistance: 25
  30. }
  31. },
  32. title: {
  33. text: 'Chart rotation demo'
  34. },
  35. subtitle: {
  36. text: 'Test options by dragging the sliders below'
  37. },
  38. plotOptions: {
  39. column: {
  40. depth: 25
  41. }
  42. },
  43. series: [{
  44. 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]
  45. }]
  46. });
  47. function showValues() {
  48. $('#alpha-value').html(chart.options.chart.options3d.alpha);
  49. $('#beta-value').html(chart.options.chart.options3d.beta);
  50. $('#depth-value').html(chart.options.chart.options3d.depth);
  51. }
  52. // Activate the sliders
  53. $('#sliders input').on('input change', function () {
  54. chart.options.chart.options3d[this.id] = this.value;
  55. showValues();
  56. chart.redraw(false);
  57. });
  58. showValues();
  59. });
  60. </script>
  61. </head>
  62. <body>
  63. <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
  64. <script src="http://cdn.hcharts.cn/highcharts/highcharts-3d.js"></script>
  65. <script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>
  66. <div id="container"></div>
  67. <div id="sliders">
  68. <table>
  69. <tr>
  70. <td>Alpha Angle</td>
  71. <td><input id="alpha" type="range" min="0" max="45" value="15"/> <span id="alpha-value" class="value"></span></td>
  72. </tr>
  73. <tr>
  74. <td>Beta Angle</td>
  75. <td><input id="beta" type="range" min="-45" max="45" value="15"/> <span id="beta-value" class="value"></span></td>
  76. </tr>
  77. <tr>
  78. <td>Depth</td>
  79. <td><input id="depth" type="range" min="20" max="100" value="50"/> <span id="depth-value" class="value"></span></td>
  80. </tr>
  81. </table>
  82. </div>
  83. </body>
  84. </html>