Highcharts大数据量树状图

一代码
<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
Highcharts大数据量树状图

猜你喜欢
