index.htm 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  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. </style>
  9. </head>
  10. <body>
  11. <script src="../../code/highcharts.js"></script>
  12. <script src="../../code/modules/exporting.js"></script>
  13. <script src="../../code/modules/export-data.js"></script>
  14. <div id="container" style="min-width: 300px; height: 400px; margin: 0 auto"></div>
  15. <script type="text/javascript">
  16. Highcharts.chart('container', {
  17. chart: {
  18. type: 'column'
  19. },
  20. title: {
  21. text: 'World\'s largest cities per 2017'
  22. },
  23. subtitle: {
  24. text: 'Source: <a href="http://en.wikipedia.org/wiki/List_of_cities_proper_by_population">Wikipedia</a>'
  25. },
  26. xAxis: {
  27. type: 'category',
  28. labels: {
  29. rotation: -45,
  30. style: {
  31. fontSize: '13px',
  32. fontFamily: 'Verdana, sans-serif'
  33. }
  34. }
  35. },
  36. yAxis: {
  37. min: 0,
  38. title: {
  39. text: 'Population (millions)'
  40. }
  41. },
  42. legend: {
  43. enabled: false
  44. },
  45. tooltip: {
  46. pointFormat: 'Population in 2017: <b>{point.y:.1f} millions</b>'
  47. },
  48. series: [{
  49. name: 'Population',
  50. data: [
  51. ['Shanghai', 24.2],
  52. ['Beijing', 20.8],
  53. ['Karachi', 14.9],
  54. ['Shenzhen', 13.7],
  55. ['Guangzhou', 13.1],
  56. ['Istanbul', 12.7],
  57. ['Mumbai', 12.4],
  58. ['Moscow', 12.2],
  59. ['São Paulo', 12.0],
  60. ['Delhi', 11.7],
  61. ['Kinshasa', 11.5],
  62. ['Tianjin', 11.2],
  63. ['Lahore', 11.1],
  64. ['Jakarta', 10.6],
  65. ['Dongguan', 10.6],
  66. ['Lagos', 10.6],
  67. ['Bengaluru', 10.3],
  68. ['Seoul', 9.8],
  69. ['Foshan', 9.3],
  70. ['Tokyo', 9.3]
  71. ],
  72. dataLabels: {
  73. enabled: true,
  74. rotation: -90,
  75. color: '#FFFFFF',
  76. align: 'right',
  77. format: '{point.y:.1f}', // one decimal
  78. y: 10, // 10 pixels down from the top
  79. style: {
  80. fontSize: '13px',
  81. fontFamily: 'Verdana, sans-serif'
  82. }
  83. }
  84. }]
  85. });
  86. </script>
  87. </body>
  88. </html>