index.htm 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  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: 300px;
  10. max-width: 800px;
  11. height: 500px;
  12. margin: 1em auto;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <script src="../../code/highcharts.js"></script>
  18. <script src="../../code/modules/variable-pie.js"></script>
  19. <div id="container"></div>
  20. <script type="text/javascript">
  21. Highcharts.chart('container', {
  22. chart: {
  23. type: 'variablepie'
  24. },
  25. title: {
  26. text: 'Countries compared by population density and total area.'
  27. },
  28. tooltip: {
  29. headerFormat: '',
  30. pointFormat: '<span style="color:{point.color}">\u25CF</span> <b> {point.name}</b><br/>' +
  31. 'Area (square km): <b>{point.y}</b><br/>' +
  32. 'Population density (people per square km): <b>{point.z}</b><br/>'
  33. },
  34. series: [{
  35. minPointSize: 10,
  36. innerSize: '20%',
  37. zMin: 0,
  38. name: 'countries',
  39. data: [{
  40. name: 'Spain',
  41. y: 505370,
  42. z: 92.9
  43. }, {
  44. name: 'France',
  45. y: 551500,
  46. z: 118.7
  47. }, {
  48. name: 'Poland',
  49. y: 312685,
  50. z: 124.6
  51. }, {
  52. name: 'Czech Republic',
  53. y: 78867,
  54. z: 137.5
  55. }, {
  56. name: 'Italy',
  57. y: 301340,
  58. z: 201.8
  59. }, {
  60. name: 'Switzerland',
  61. y: 41277,
  62. z: 214.5
  63. }, {
  64. name: 'Germany',
  65. y: 357022,
  66. z: 235.6
  67. }]
  68. }]
  69. });
  70. </script>
  71. </body>
  72. </html>