Highcharts Treemap向下钻取/钻取问题

时间:2015-05-28 12:45:16

标签: highcharts treemap drilldown

我正在尝试使用HighCharts树形图捕获向上钻取/向下事件,例如http://jsfiddle.net/ghh1x7vt/1/

我必须在向下/向上钻取时动态设置数据标签大小/颜色。有人可以帮我这么做吗?

$(function () {
var data = {

        "Eastern Mediterranean": {
        "Egypt": {
            "Communicable & other Group I": "74.3",
                "Noncommunicable diseases": "781.7",
                "Injuries": "33.5"
        },
            "South Sudan": {
            "Injuries": "143.4",
                "Communicable & other Group I": "831.3",
                "Noncommunicable diseases": "623.4"
        },
            "Sudan": {
            "Injuries": "133.6",
                "Noncommunicable diseases": "551.0",
                "Communicable & other Group I": "495.0"
        },
            "Libya": {
            "Injuries": "62.8",
                "Noncommunicable diseases": "550.0",
                "Communicable & other Group I": "52.6"
        },
            "Jordan": {
            "Noncommunicable diseases": "640.3",
                "Injuries": "53.5",
                "Communicable & other Group I": "52.5"
        },
            "Pakistan": {
            "Communicable & other Group I": "296.0",
                "Noncommunicable diseases": "669.3",
                "Injuries": "98.7"
        },
            "Djibouti": {
            "Noncommunicable diseases": "631.1",
                "Communicable & other Group I": "626.0",
                "Injuries": "106.0"
        },
            "Syrian Arab Republic": {
            "Communicable & other Group I": "41.0",
                "Injuries": "308.0",
                "Noncommunicable diseases": "572.7"
        },
            "Morocco": {
            "Noncommunicable diseases": "707.7",
                "Communicable & other Group I": "131.5",
                "Injuries": "47.0"
        },
            "Yemen": {
            "Communicable & other Group I": "515.0",
                "Noncommunicable diseases": "626.9",
                "Injuries": "84.3"
        },
            "Bahrain": {
            "Injuries": "33.5",
                "Noncommunicable diseases": "505.7",
                "Communicable & other Group I": "48.5"
        },
            "United Arab Emirates": {
            "Noncommunicable diseases": "546.8",
                "Injuries": "31.5",
                "Communicable & other Group I": "35.6"
        },
            "Lebanon": {
            "Noncommunicable diseases": "384.6",
                "Injuries": "40.6",
                "Communicable & other Group I": "30.5"
        },
            "Saudi Arabia": {
            "Noncommunicable diseases": "549.4",
                "Injuries": "41.1",
                "Communicable & other Group I": "71.3"
        },
            "Iran (Islamic Republic of)": {
            "Injuries": "74.9",
                "Communicable & other Group I": "56.2",
                "Noncommunicable diseases": "569.3"
        },
            "Iraq": {
            "Communicable & other Group I": "87.0",
                "Noncommunicable diseases": "715.5",
                "Injuries": "128.5"
        },
            "Qatar": {
            "Communicable & other Group I": "28.3",
                "Injuries": "41.0",
                "Noncommunicable diseases": "407.0"
        },
            "Afghanistan": {
            "Communicable & other Group I": "362.7",
                "Injuries": "169.2",
                "Noncommunicable diseases": "846.3"
        },
            "Somalia": {
            "Noncommunicable diseases": "550.7",
                "Communicable & other Group I": "927.2",
                "Injuries": "188.5"
        },
            "Kuwait": {
            "Communicable & other Group I": "82.5",
                "Injuries": "25.4",
                "Noncommunicable diseases": "406.3"
        },
            "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"
        }

    }
};
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 = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        events: {
            redraw: function () {

                var rootNode = this.series[0].rootNode;

                if (rootNode === '') {
                    alert(' NO DRILLED - LEVEL 0 ')
                } else {
                    if (rootNode.split('_').length == 2) {
                        alert(' DRILLED - LEVEL 1');
                    } else if (rootNode.split('_').length >= 2) {
                        alert(' DRILLED - LEVEL 2');
                    }
                }

            }
        }
    },
    series: [{
        type: "treemap",
        layoutAlgorithm: 'squarified',
        allowDrillToNode: true,
        dataLabels: {
            enabled: false
        },
        levelIsConstant: false,
        levels: [{
            level: 1,
            dataLabels: {
                enabled: true
            },
            borderWidth: 3
        }],
        data: points
    }],
    subtitle: {
        text: 'Click points to drill down. Source: <a href="http://apps.who.int/gho/data/node.main.12?lang=en">WHO</a>.'
    },
    title: {
        text: 'Global Mortality Rate 2012, per 100 000 population'
    }
});

});

0 个答案:

没有答案