Highcharts大資料量樹狀圖
阿新 • • 發佈:2019-01-12
一 程式碼
<html> <head> <meta charset="UTF-8" /> <title>Highcharts實現大資料量樹狀圖</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/treemap.js"></script> <script src="https://code.highcharts.com/modules/heatmap.js"></script> </head> <body> <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div> <script language="JavaScript"> $(document).ready(function() { var data = { "South-East Asia": { "Sri Lanka": { "Communicable & other Group I": "75.5", "Injuries": "89.0", "Noncommunicable diseases": "501.2" }, "Indonesia": { "Injuries": "49.3", "Noncommunicable diseases": "680.1", "Communicable & other Group I": "162.4" } }, "Europe": { "Hungary": { "Communicable & other Group I": "16.8", "Noncommunicable diseases": "602.8", "Injuries": "44.3" }, "Czech Republic": { "Injuries": "39.1", "Noncommunicable diseases": "460.7", "Communicable & other Group I": "27.0" } }, "Africa": { "Equatorial Guinea": { "Communicable & other Group I": "756.8", "Injuries": "133.6", "Noncommunicable diseases": "729.0" }, "Lesotho": { "Communicable & other Group I": "1110.5", "Injuries": "142.5", "Noncommunicable diseases": "671.8" }, "Nigeria": { "Noncommunicable diseases": "673.7", "Communicable & other Group I": "866.2", "Injuries": "145.6" } }, "Americas": { "Canada": { "Noncommunicable diseases": "318.0", "Injuries": "31.3", "Communicable & other Group I": "22.6" }, "United States of America": { "Noncommunicable diseases": "412.8", "Injuries": "44.2", "Communicable & other Group I": "31.3" }, "Guatemala": { "Communicable & other Group I": "212.7", "Noncommunicable diseases": "409.4", "Injuries": "111.0" } }, "Eastern Mediterranean": { "Egypt": { "Communicable & other Group I": "74.3", "Noncommunicable diseases": "781.7", "Injuries": "33.5" }, "Oman": { "Injuries": "52.8", "Noncommunicable diseases": "478.2", "Communicable & other Group I": "84.2" }, "Tunisia": { "Noncommunicable diseases": "509.3", "Communicable & other Group I": "65.0", "Injuries": "39.1" } }, "Western Pacific": { "Mongolia": { "Injuries": "69.4", "Noncommunicable diseases": "966.5", "Communicable & other Group I": "82.8" }, "Singapore": { "Communicable & other Group I": "66.2", "Noncommunicable diseases": "264.8", "Injuries": "17.5" }, "Republic of Korea": { "Injuries": "53.1", "Communicable & other Group I": "33.8", "Noncommunicable diseases": "302.1" } } }; var points = [], region_p, region_val, region_i, country_p, country_i, cause_p, cause_i, cause_name = []; cause_name['Communicable & other Group I'] = 'Communicable diseases'; cause_name['Noncommunicable diseases'] = 'Non-communicable diseases'; cause_name['Injuries'] = 'Injuries'; region_i = 0; for (var region in data) { region_val = 0; region_p = { id: "id_" + region_i, name: region, color: Highcharts.getOptions().colors[region_i] }; country_i = 0; for (var country in data[region]) { country_p = { id: region_p.id + "_" + country_i, name: country, parent: region_p.id }; points.push(country_p); cause_i = 0; for (var cause in data[region][country]) { cause_p = { id: country_p.id + "_" + cause_i, name: cause_name[cause], parent: country_p.id, value: Math.round(+data[region][country][cause]) }; region_val += cause_p.value; points.push(cause_p); cause_i++; } country_i++; } region_p.value = Math.round(region_val / country_i); points.push(region_p); region_i++; } var chart = { renderTo: 'container' }; var title = { text: '2012年全球死亡率到,每10萬人口' }; var subtitle = { text: '通過點選鑽入,獲取更詳細資料' }; var series = [{ type: "treemap", layoutAlgorithm: 'squarified', allowDrillToNode: true, dataLabels: { enabled: false }, levelIsConstant: false, levels: [{ level: 1, dataLabels: { enabled: true }, borderWidth: 3 }], data: points }]; var json = {}; json.title = title; json.subtitle = subtitle; json.series = series; $('#container').highcharts(json); }); </script> </body> </html>
二 執行結果
點選Africa
點選Lesotho