1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859 |
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>Highcharts Example</title>
- <style type="text/css">
- #container, #sliders {
- min-width: 310px;
- max-width: 800px;
- margin: 0 auto;
- }
- #container {
- height: 400px;
- }
- </style>
- </head>
- <body>
- <script src="../../code/highcharts.js"></script>
- <script src="../../code/highcharts-3d.js"></script>
- <script src="../../code/modules/cylinder.js"></script>
- <script src="../../code/modules/exporting.js"></script>
- <script src="../../code/modules/export-data.js"></script>
- <div id="container"></div>
- <script type="text/javascript">
- Highcharts.chart('container', {
- chart: {
- type: 'cylinder',
- options3d: {
- enabled: true,
- alpha: 15,
- beta: 15,
- depth: 50,
- viewDistance: 25
- }
- },
- title: {
- text: 'Highcharts Cylinder Chart'
- },
- plotOptions: {
- series: {
- depth: 25,
- colorByPoint: true
- }
- },
- series: [{
- 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],
- name: 'Cylinders',
- showInLegend: false
- }]
- });
- </script>
- </body>
- </html>
|