index.htm 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  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. min-width: 310px;
  10. max-width: 800px;
  11. height: 400px;
  12. margin: 0 auto;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <script src="../../code/highcharts.js"></script>
  18. <script src="../../code/highcharts-more.js"></script>
  19. <script src="../../code/modules/exporting.js"></script>
  20. <script src="../../code/modules/export-data.js"></script>
  21. <div id="container"></div>
  22. <script type="text/javascript">
  23. Highcharts.chart('container', {
  24. chart: {
  25. type: 'columnpyramid'
  26. },
  27. title: {
  28. text: 'The 5 highest pyramids in the World'
  29. },
  30. colors: ['#C79D6D', '#B5927B', '#CE9B84', '#B7A58C', '#C7A58C'],
  31. xAxis: {
  32. crosshair: true,
  33. labels: {
  34. style: {
  35. fontSize: '14px'
  36. }
  37. },
  38. type: 'category'
  39. },
  40. yAxis: {
  41. min: 0,
  42. title: {
  43. text: 'Height (m)'
  44. }
  45. },
  46. tooltip: {
  47. valueSuffix: ' m'
  48. },
  49. series: [{
  50. name: 'Height',
  51. colorByPoint: true,
  52. data: [
  53. ['Pyramid of Khufu', 138.8],
  54. ['Pyramid of Khafre', 136.4],
  55. ['Red Pyramid', 104],
  56. ['Bent Pyramid', 101.1],
  57. ['Pyramid of the Sun', 75]
  58. ],
  59. showInLegend: false
  60. }]
  61. });
  62. </script>
  63. </body>
  64. </html>