index.htm 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  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, #sliders {
  9. min-width: 310px;
  10. max-width: 800px;
  11. margin: 0 auto;
  12. }
  13. #container {
  14. height: 400px;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <script src="../../code/highcharts.js"></script>
  20. <script src="../../code/highcharts-3d.js"></script>
  21. <script src="../../code/modules/cylinder.js"></script>
  22. <script src="../../code/modules/exporting.js"></script>
  23. <script src="../../code/modules/export-data.js"></script>
  24. <div id="container"></div>
  25. <script type="text/javascript">
  26. Highcharts.chart('container', {
  27. chart: {
  28. type: 'cylinder',
  29. options3d: {
  30. enabled: true,
  31. alpha: 15,
  32. beta: 15,
  33. depth: 50,
  34. viewDistance: 25
  35. }
  36. },
  37. title: {
  38. text: 'Highcharts Cylinder Chart'
  39. },
  40. plotOptions: {
  41. series: {
  42. depth: 25,
  43. colorByPoint: true
  44. }
  45. },
  46. series: [{
  47. 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],
  48. name: 'Cylinders',
  49. showInLegend: false
  50. }]
  51. });
  52. </script>
  53. </body>
  54. </html>