index.htm 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>Highcharts Example</title>
  6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  7. <script type="text/javascript">
  8. $(function () {
  9. $('#container').highcharts({
  10. chart: {
  11. type: 'bar'
  12. },
  13. title: {
  14. text: 'Historic World Population by Region'
  15. },
  16. subtitle: {
  17. text: 'Source: Wikipedia.org'
  18. },
  19. xAxis: {
  20. categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
  21. title: {
  22. text: null
  23. }
  24. },
  25. yAxis: {
  26. min: 0,
  27. title: {
  28. text: 'Population (millions)',
  29. align: 'high'
  30. },
  31. labels: {
  32. overflow: 'justify'
  33. }
  34. },
  35. tooltip: {
  36. valueSuffix: ' millions'
  37. },
  38. plotOptions: {
  39. bar: {
  40. dataLabels: {
  41. enabled: true
  42. }
  43. }
  44. },
  45. legend: {
  46. layout: 'vertical',
  47. align: 'right',
  48. verticalAlign: 'top',
  49. x: -40,
  50. y: 100,
  51. floating: true,
  52. borderWidth: 1,
  53. backgroundColor: '#FFFFFF',
  54. shadow: true
  55. },
  56. credits: {
  57. enabled: false
  58. },
  59. series: [{
  60. name: 'Year 1800',
  61. data: [107, 31, 635, 203, 2]
  62. }, {
  63. name: 'Year 1900',
  64. data: [133, 156, 947, 408, 6]
  65. }, {
  66. name: 'Year 2008',
  67. data: [973, 914, 4054, 732, 34]
  68. }]
  69. });
  70. });
  71. </script>
  72. </head>
  73. <body>
  74. <script src="../../js/highcharts.js"></script>
  75. <script src="../../js/modules/exporting.js"></script>
  76. <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
  77. </body>
  78. </html>