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.

84 lines
2.2 KiB

9 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. #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. margin: 75,
  25. options3d: {
  26. enabled: true,
  27. alpha: 15,
  28. beta: 15,
  29. depth: 50,
  30. viewDistance: 25
  31. }
  32. },
  33. title: {
  34. text: 'Chart rotation demo'
  35. },
  36. subtitle: {
  37. text: 'Test options by dragging the sliders below'
  38. },
  39. plotOptions: {
  40. column: {
  41. depth: 25
  42. }
  43. },
  44. series: [{
  45. 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]
  46. }]
  47. });
  48. function showValues() {
  49. $('#R0-value').html(chart.options.chart.options3d.alpha);
  50. $('#R1-value').html(chart.options.chart.options3d.beta);
  51. }
  52. // Activate the sliders
  53. $('#R0').on('change', function () {
  54. chart.options.chart.options3d.alpha = this.value;
  55. showValues();
  56. chart.redraw(false);
  57. });
  58. $('#R1').on('change', function () {
  59. chart.options.chart.options3d.beta = this.value;
  60. showValues();
  61. chart.redraw(false);
  62. });
  63. showValues();
  64. });
  65. </script>
  66. </head>
  67. <body>
  68. <script src="../../js/highcharts.js"></script>
  69. <script src="../../js/highcharts-3d.js"></script>
  70. <script src="../../js/modules/exporting.js"></script>
  71. <div id="container"></div>
  72. <div id="sliders">
  73. <table>
  74. <tr><td>Alpha Angle</td><td><input id="R0" type="range" min="0" max="45" value="15"/> <span id="R0-value" class="value"></span></td></tr>
  75. <tr><td>Beta Angle</td><td><input id="R1" type="range" min="0" max="45" value="15"/> <span id="R1-value" class="value"></span></td></tr>
  76. </table>
  77. </div>
  78. </body>
  79. </html>