123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869 |
- <!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 {
- min-width: 310px;
- max-width: 800px;
- height: 400px;
- margin: 0 auto;
- }
- </style>
- </head>
- <body>
- <script src="../../code/highcharts.js"></script>
- <script src="../../code/highcharts-more.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: 'columnpyramid'
- },
- title: {
- text: 'The 5 highest pyramids in the World'
- },
- colors: ['#C79D6D', '#B5927B', '#CE9B84', '#B7A58C', '#C7A58C'],
- xAxis: {
- crosshair: true,
- labels: {
- style: {
- fontSize: '14px'
- }
- },
- type: 'category'
- },
- yAxis: {
- min: 0,
- title: {
- text: 'Height (m)'
- }
- },
- tooltip: {
- valueSuffix: ' m'
- },
- series: [{
- name: 'Height',
- colorByPoint: true,
- data: [
- ['Pyramid of Khufu', 138.8],
- ['Pyramid of Khafre', 136.4],
- ['Red Pyramid', 104],
- ['Bent Pyramid', 101.1],
- ['Pyramid of the Sun', 75]
- ],
- showInLegend: false
- }]
- });
- </script>
- </body>
- </html>
|