index.htm 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  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. height: 400px;
  10. min-width: 310px;
  11. max-width: 800px;
  12. margin: 0 auto;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <script src="../../code/highcharts.js"></script>
  18. <script src="../../code/highcharts-3d.js"></script>
  19. <script src="../../code/modules/exporting.js"></script>
  20. <script src="../../code/modules/export-data.js"></script>
  21. <div id="container" style="height: 400px"></div>
  22. <script type="text/javascript">
  23. Highcharts.chart('container', {
  24. chart: {
  25. type: 'column',
  26. options3d: {
  27. enabled: true,
  28. alpha: 10,
  29. beta: 25,
  30. depth: 70
  31. }
  32. },
  33. title: {
  34. text: '3D chart with null values'
  35. },
  36. subtitle: {
  37. text: 'Notice the difference between a 0 value and a null point'
  38. },
  39. plotOptions: {
  40. column: {
  41. depth: 25
  42. }
  43. },
  44. xAxis: {
  45. categories: Highcharts.getOptions().lang.shortMonths,
  46. labels: {
  47. skew3d: true,
  48. style: {
  49. fontSize: '16px'
  50. }
  51. }
  52. },
  53. yAxis: {
  54. title: {
  55. text: null
  56. }
  57. },
  58. series: [{
  59. name: 'Sales',
  60. data: [2, 3, null, 4, 0, 5, 1, 4, 6, 3]
  61. }]
  62. });
  63. </script>
  64. </body>
  65. </html>