[highcharts] Large tree map 하이차트

Large tree map 하이차트 

---

트리맵으로 시각화된 대규모 데이터 세트를 보여주는 하이차트입니다.

 

See the Pen Large tree map by 안중현 (@pogba10) on CodePen.

 

위의 예시에서는 https://cdn.jsdelivr.net/gh/highcharts/highcharts@v7.0.0/samples/data/world-mortality.json 에서 데이터를 가져와서 사용하고 있습니다.

 

데이터를 간단하게 본다면 아래와 같습니다.

{
	"Eastern Mediterranean": {
		"Afghanistan": {
			"Communicable & other Group I": 102.5,
			"Injuries": 47,
			"Noncommunicable diseases": 110.4
		},
		"Bahrain": {
			"Communicable & other Group I": 0.2,
			"Injuries": 0.3,
			"Noncommunicable diseases": 2.7
		}
	},
	"Europe": {
		"Albania": {
			"Communicable & other Group I": 0.8,
			"Injuries": 0.9,
			"Noncommunicable diseases": 20.2
		},
		"Armenia": {
			"Communicable & other Group I": 0.9,
			"Injuries": 1.1,
			"Noncommunicable diseases": 27.4
		}
	},
	"Africa": {
		"Algeria": {
			"Communicable & other Group I": 31.5,
			"Injuries": 19.8,
			"Noncommunicable diseases": 144.6
		},
		"Angola": {
			"Communicable & other Group I": 210.9,
			"Injuries": 36.6,
			"Noncommunicable diseases": 93.9
		}
	},
	"Americas": {
		"Antigua and Barbuda": {
			"Communicable & other Group I": 0.1,
			"Injuries": 0,
			"Noncommunicable diseases": 0.4
		},
		"Argentina": {
			"Communicable & other Group I": 40.9,
			"Injuries": 23.5,
			"Noncommunicable diseases": 268.1
		}
	},
	"Western Pacific": {
		"Australia": {
			"Communicable & other Group I": 7.2,
			"Injuries": 8.8,
			"Noncommunicable diseases": 137
		},
		"Brunei Darussalam": {
			"Communicable & other Group I": 0.2,
			"Injuries": 0.1,
			"Noncommunicable diseases": 1.2
		}
	},
	"South-East Asia": {
		"Bangladesh": {
			"Communicable & other Group I": 219,
			"Injuries": 68,
			"Noncommunicable diseases": 580.3
		},
		"Bhutan": {
			"Communicable & other Group I": 1.1,
			"Injuries": 0.5,
			"Noncommunicable diseases": 3.3
		}
	}
}

 

출처 : https://www.highcharts.com/demo/treemap-large-dataset

---

트리맵 depth 3개 [level 1단계 - 2단계 - 3단계]

---

area1.json

{
	"1단계": {
		"2단계 [1]": {
			"3단계 [1]": 0.8,
			"3단계 [2]": 0.9,
			"3단계 [3]": 20.2,
			"3단계 [4]": 20.2,
			"3단계 [5]": 20.2
		},
		"2단계 [2]": {
			"3단계 [1]": 0.8,
			"3단계 [2]": 0.9,
			"3단계 [3]": 20.2,
			"3단계 [4]": 20.2,
			"3단계 [5]": 20.2
		},
	}
}

javaScript 

	/* console result
	$.getJSON('area1.json', function(data) {
		$.each(data, function(idx, item) {
			console.log(item);
		});
	});
	*/

	Highcharts.getJSON('area1.json', function (data) {
	
	    var points = [],
    		region,
	        regionP,
	        regionVal,
	        regionI = 0,
    		country,
	        countryP,
	        countryI,
    		cause,
	        causeP,
	        causeI
	        
	    for (region in data) {
	        if (Object.hasOwnProperty.call(data, region)) {
	            regionVal = 0;
	            regionP = {
	                id: 'id_' + regionI,
	                name: region,
	                color: Highcharts.getOptions().colors[regionI]
	            };
	            countryI = 0;
	            for (country in data[region]) {
	                if (Object.hasOwnProperty.call(data[region], country)) {
	                    countryP = {
	                        id: regionP.id + '_' + countryI,
	                        name: country,
	                        parent: regionP.id
	                    };
	                    points.push(countryP);
	                    causeI = 0;
	                    for (cause in data[region][country]) {
	                        if (Object.hasOwnProperty.call(
	                            data[region][country], cause
	                        )) {
	                            causeP = {
	                                id: countryP.id + '_' + causeI,
	                                name: cause,
	                                parent: countryP.id,
	                                value: Math.round(+data[region][country][cause])
	                            };
	                            regionVal += causeP.value;
	                            points.push(causeP);
	                            causeI = causeI + 1;
	                        }
	                    }
	                    countryI = countryI + 1;
	                }
	            }
	            regionP.value = Math.round(regionVal / countryI);
	            points.push(regionP);
	            regionI = regionI + 1;
	        }
	    }
	    Highcharts.chart('container', {
	        series: [{
	            name: 'Regions',
	            type: 'treemap',
	            layoutAlgorithm: 'squarified',
	            allowDrillToNode: true,
	            animationLimit: 1000,
	            dataLabels: {
	                enabled: false
	            },
	            levels: [{
	                level: 1,
	                dataLabels: {
	                    enabled: true
	                },
	                borderWidth: 3,
	                levelIsConstant: false
	            }, {
	                level: 1,
	                dataLabels: {
	                    style: {
	                        fontSize: '14px'
	                    }
	                }
	            }],
	            accessibility: {
	                exposeAsGroupOnly: true
	            },
	            data: points
	        }],
            subtitle: {
                enabled : false
            },
            title: {
                enabled : false
            },
            credits: {
                enabled : false
            }
	    });
	});

 

---

트리맵 depth 2개  [level 1단계 - 2단계]

---

area2.json

{
	"1단계 [1]": {
		"2단계 [1]": 2020.8,
		"2단계 [2]": 2021.9,
		"2단계 [3]": 12022.2,
		"2단계 [4]": 2023.2,
		"2단계 [5]": 32024.2
	},
	"1단계 [2]": {
		"2단계 [1]": 200.8,
		"2단계 [2]": 210.9,
		"2단계 [3]": 222.2,
		"2단계 [4]": 223.2,
		"2단계 [5]": 3224.2
	},
	"1단계 [3]": {
		"2단계 [1]": 2.8,
		"2단계 [2]": 1.9,
		"2단계 [3]": 22.2,
		"2단계 [4]": 23.2,
		"2단계 [5]": 24.2
	}
}

javaScript

	function AddComma(data_value) {
		return Number(data_value).toLocaleString('ko-KR');
	}

	/* console result
	$.getJSON('area2.json', function(data) {
		$.each(data, function(idx, item) {
			console.log(item);
		});
	});
	*/

	Highcharts.getJSON('area2.json', function (data) {
	    var points = [],
	        region,
      	 	regionP,
	        regionVal,
	        regionI = 0,
        	country,
	        countryP,
	        countryI
	        
	    for (region in data) {
	        if (Object.hasOwnProperty.call(data, region)) {
	            regionVal = 0;
	            regionP = {
	                id: 'id_' + regionI,
	                name: region,
	                color: Highcharts.getOptions().colors[regionI]
	            };
	            countryI = 0;
	            for (country in data[region]) {
	                if (Object.hasOwnProperty.call(data[region], country)) {
	                    countryP = {
	                        id: regionP.id + '_' + countryI,
	                        name: country,
	                        parent: regionP.id,
                        	value: Math.round(data[region][country])
	                    };
	                    regionVal += countryP.value;
	                    points.push(countryP);
	                    countryI = countryI + 1;
	                }
	            }
	            regionP.value = Math.round(regionVal / countryI);
	            points.push(regionP);
	            regionI = regionI + 1;
	        }
	    }
	    
	    Highcharts.chart('container', {
	        series: [{
	            name: 'Regions',
	            type: 'treemap',
	            layoutAlgorithm: 'squarified',
	            allowDrillToNode: true,
	            animationLimit: 1000,
	            dataLabels: {
	                enabled: false
	            },
	            levels: [{
	                level: 1,
	                dataLabels: {
	                    enabled: true
	                },
	                borderWidth: 3,
	                levelIsConstant: false
	            }, {
	                level: 1,
	                dataLabels: {
	                    style: {
	                        fontSize: '14px'
	                    }
	                }
	            }],
	            accessibility: {
	                exposeAsGroupOnly: true
	            },
	            data: points
	        }],
            subtitle: {
                enabled : false
            },
            title: {
                enabled : false
            },
            credits: {
                enabled : false
            },
	        tooltip :{
                    useHTML:true,
                    formatter : function(){
                        var tooltip_text ='';
                        if(this.point.node.level =='1'){
                            tooltip_text = this.point.name + ' : ' + AddComma(this.point.value) +' (단위)'
                        }else{
                            tooltip_text = this.point.name + ' : ' + AddComma(this.point.value) +' (단위)'
                        }
                        return tooltip_text;
                    }
            	}
	    });
	});

---

트리맵 depth 2개 / 크기 및 단위 조정

---

area3.json

{
	"1단계 [1]": {
		"2단계 [1]": 2020.8,
		"2단계 [2]": 2021.9,
		"2단계 [3]": 12022.2,
		"2단계 [4]": 2023.2,
		"2단계 [5]": 32024.2
	},
	"1단계 [2]": {
		"2단계 [1]": 200.8,
		"2단계 [2]": 210.9,
		"2단계 [3]": 222.2,
		"2단계 [4]": 223.2,
		"2단계 [5]": 3224.2
	},
	"1단계 [3]": {
		"2단계 [1]": 2.8,
		"2단계 [2]": 1.9,
		"2단계 [3]": 22.2,
		"2단계 [4]": 23.2,
		"2단계 [5]": 24.2
	}
}

javaScript

    function AddComma(data_value) {
        return Number(data_value).toLocaleString('ko-KR');
    }

    Highcharts.getJSON('area3.json', function (data) {
	
        var points = [],
            region, regionP, regionVal, regionI = 0, // level 1
            country, countryP, countryI, // level 2
            value1, value2, value3, totalVal
            
        // 합계를 구하는 for문     
        for (region in data) { 
	    	for (country in data[region]) {
                    if(region == "1단계 [1]") {
                        value1 = data[region][country];
                    }else if(region == "1단계 [2]") {
                        value2 = data[region][country];
                    }else if(region == "1단계 [3]") {
                        value3 = data[region][country];
                    }
      	      }
        }
        totalVal = value1 + value2 + value3;

        for (region in data) {
            if (Object.hasOwnProperty.call(data, region)) {
                regionVal = 0;
                
                // level = 1;
                regionP = {         
                    id: 'id_' + regionI,
                    name: region,
                    color: Highcharts.getOptions().colors[regionI]
                };
                countryI = 0;

                
                for (country in data[region]) {
                    if (Object.hasOwnProperty.call(data[region], country)) {
                    
                    	// level = 2; 
                        countryP = {
                            id: regionP.id + '_' + countryI,
                            name: country,
                            parent: regionP.id,
                            value: Math.round(data[region][country])
                        };
                        regionVal += countryP.value;
                        points.push(countryP);
                        countryI = countryI + 1;
                    }
                }

                if(region == "1단계 [1]"){
                    var temp = 0;
                    temp = (Math.round(regionVal)/totalVal) * 100; // 142.0706157187165
                    if(temp > 0 && temp < 5) {
                        temp = 5;
                    }
                    regionP.value = temp; // 분포도 크기를 위한 임시 값 
                    regionP.Pvalue = Math.round(regionVal); // 실제 값 
                }else if(region == "1단계 [2]") {
                    var temp = 0;
                    temp = (Math.round(regionVal)/totalVal) * 100; // 11.569887107840081
                    if(temp > 0 && temp < 5) {
                        temp = 5;
                    }
                    regionP.value = temp; // 분포도 크기를 위한 임시 값 
                    regionP.Pvalue = Math.round(regionVal); // 실제 값 
                }else if(region == "1단계 [3]") {
                    var temp = 0;
                    // regionVal : 74, totalVal : 35272.6
                    temp = (Math.round(regionVal)/totalVal) * 100; // 0.20979457142371133
                    if(temp > 0 && temp < 5) {
                        temp = 5;
                    }
                    regionP.value = temp; // 분포도 크기를 위한 임시 값 
                    regionP.Pvalue = Math.round(regionVal); // 실제 값 
                }else {
                    regionP.value = Math.round(regionVal);
                }

                points.push(regionP);
                regionI = regionI + 1;
            }
        }
	
        Highcharts.chart('container', {
            series: [{
                name: 'Regions',
                type: 'treemap',
                layoutAlgorithm: 'squarified',
                allowDrillToNode: true,
                animationLimit: 1000,
                dataLabels: {
                    enabled: false
                },
                levels: [{
                    level: 1,
                    dataLabels: {
                        enabled: true
                    },
                    borderWidth: 3,
                    levelIsConstant: false
                }, {
                    level: 1,
                    dataLabels: {
                        style: {
                            fontSize: '14px'
                        }
                    }
                }],
                accessibility: {
                    exposeAsGroupOnly: true
                },
                data: points
            }],
            subtitle: {
                enabled : false
            },
            title: {
                enabled : false
            },
            credits: {
                enabled : false
            },
            tooltip :{
                useHTML:true,
                formatter : function(){
                    var tooltip_text ='';

                    // level = 1;
                    if(this.point.node.level == '1'){
                        var pointLength = Math.round(Math.log10(this.point.Pvalue)+1); // 
                        if(pointLength < 5) {
                            tooltip_text = this.point.name + ' : ' + AddComma(this.point.Pvalue) +' (단위)'
                            console.log("if(pointLength < 5) / tooltip_text : " + tooltip_text);
                        }else {
                            var split = 10000;
                            var temp = AddComma((this.point.Pvalue / split).toFixed(1)) + "만";
                            tooltip_text = this.point.name + ' : ' + temp + '(단위)';
                            console.log("if(pointLength > 5) /tooltip_text : " + tooltip_text);

                        }

                    // level = 2;
                    }else{
                        var pointLength = Math.round(Math.log10(this.point.value)+1);
                        if(pointLength < 5) {
                            tooltip_text = this.point.name + ' : ' + AddComma(this.point.value) +' (단위)'
                        }else {
                            var split = 10000;
                            var temp = AddComma((this.point.value / split).toFixed(1)) + "만";
                            tooltip_text = this.point.name + ' : ' + temp + '(단위)';
                        }
                    }
                    return tooltip_text;
                }
            }
        });
    });