index.htm 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  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: 600px;
  11. margin: 0 auto;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <script src="../../code/highcharts.js"></script>
  17. <script src="../../code/modules/heatmap.js"></script>
  18. <script src="../../code/modules/treemap.js"></script>
  19. <div id="container"></div>
  20. <script type="text/javascript">
  21. $.getJSON('https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/world-mortality.json', function (data) {
  22. var points = [],
  23. regionP,
  24. regionVal,
  25. regionI = 0,
  26. countryP,
  27. countryI,
  28. causeP,
  29. causeI,
  30. region,
  31. country,
  32. cause,
  33. causeName = {
  34. 'Communicable & other Group I': 'Communicable diseases',
  35. 'Noncommunicable diseases': 'Non-communicable diseases',
  36. 'Injuries': 'Injuries'
  37. };
  38. for (region in data) {
  39. if (data.hasOwnProperty(region)) {
  40. regionVal = 0;
  41. regionP = {
  42. id: 'id_' + regionI,
  43. name: region,
  44. color: Highcharts.getOptions().colors[regionI]
  45. };
  46. countryI = 0;
  47. for (country in data[region]) {
  48. if (data[region].hasOwnProperty(country)) {
  49. countryP = {
  50. id: regionP.id + '_' + countryI,
  51. name: country,
  52. parent: regionP.id
  53. };
  54. points.push(countryP);
  55. causeI = 0;
  56. for (cause in data[region][country]) {
  57. if (data[region][country].hasOwnProperty(cause)) {
  58. causeP = {
  59. id: countryP.id + '_' + causeI,
  60. name: causeName[cause],
  61. parent: countryP.id,
  62. value: Math.round(+data[region][country][cause])
  63. };
  64. regionVal += causeP.value;
  65. points.push(causeP);
  66. causeI = causeI + 1;
  67. }
  68. }
  69. countryI = countryI + 1;
  70. }
  71. }
  72. regionP.value = Math.round(regionVal / countryI);
  73. points.push(regionP);
  74. regionI = regionI + 1;
  75. }
  76. }
  77. Highcharts.chart('container', {
  78. series: [{
  79. type: 'treemap',
  80. layoutAlgorithm: 'squarified',
  81. allowDrillToNode: true,
  82. animationLimit: 1000,
  83. dataLabels: {
  84. enabled: false
  85. },
  86. levelIsConstant: false,
  87. levels: [{
  88. level: 1,
  89. dataLabels: {
  90. enabled: true
  91. },
  92. borderWidth: 3
  93. }],
  94. data: points
  95. }],
  96. subtitle: {
  97. text: 'Click points to drill down. Source: <a href="http://apps.who.int/gho/data/node.main.12?lang=en">WHO</a>.'
  98. },
  99. title: {
  100. text: 'Global Mortality Rate 2012, per 100 000 population'
  101. }
  102. });
  103. });
  104. </script>
  105. </body>
  106. </html>