Проблема детализации/детализации карты дерева Highcharts

Я пытаюсь зафиксировать событие детализации вверх/вниз при использовании карты дерева 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'
    }
});

});


person Mohan    schedule 28.05.2015    source источник
comment
Как насчет того, чтобы просто установить цвет при создании серии? Вот так: jsfiddle.net/ghh1x7vt/2 (зеленый против синего против красного)?   -  person Paweł Fus    schedule 28.05.2015
comment
оцените быстрый ответ. В настоящее время у меня есть 4 уровня, и я отображаю метки данных на всех уровнях. Так что это немного сбивает с толку, так как все они одного размера. Поэтому я хочу установить размер по мере детализации вниз/вверх, чтобы размер шрифта выглядел согласованным. Если я жестко запрограммирую размер, он будет меняться при детализации вверх/вниз. Любые другие идеи достижения этого?   -  person Mohan    schedule 28.05.2015
comment
Извините, но ваше объяснение меня смутило. (...) confusing as all are at same size и позже I want to set size (...) so that the font size looks consistent. Размер шрифта одинаков на всех уровнях? В любом случае, fontSize можно установить так же, как и цвета: jsfiddle.net/ghh1x7vt/3   -  person Paweł Fus    schedule 28.05.2015
comment
Извиняюсь за путаницу. Он мое требование. У меня есть 4 уровня данных, и я показываю метки на всех уровнях. Таким образом, даже с 1-го уровня все метки данных дочернего уровня видны и делают диаграмму немного запутанной, чтобы читать и понимать, что такое метка текущего уровня, пока не будет наведен указатель мыши. Итак, я хочу динамически менять шрифт/непрозрачность по мере детализации/вверх. то есть, если я устанавливаю шрифт 12 для уровня 1, 10 для уровня 2 и т. д., когда я перемещаю уровни при детализации/вверху, я хочу установить шрифт обратно на 12, чтобы шрифт оставался одинаковым по размеру на всех уровнях. В качестве альтернативы я также могу установить непрозрачность шрифта как развертку/вверх.   -  person Mohan    schedule 29.05.2015
comment
Хорошо, но что не так с подходом, который я отправил вам ранее? Эта демонстрация: jsfiddle.net/ghh1x7vt/3   -  person Paweł Fus    schedule 29.05.2015
comment
Проблема в том, что в вашем примере всегда отображаются метки данных текущего уровня (только один уровень). Но в моем случае я буду отображать метки данных всех уровней, что означает, что я могу видеть метки данных всех 4 уровней с уровня 1. Таким образом, одинаковый размер или непрозрачность текста смутит пользователя, поскольку все они выглядят одинаково (хотя текст дочерних уровней выглядит немного размытым). Итак, я хочу контролировать размер/непрозрачность при детализации вниз/вверх.   -  person Mohan    schedule 02.06.2015
comment
Можете ли вы показать мне пример со всеми отображаемыми ярлыками? Я думаю, это не поддерживается? Отрисовывается только метка текущего уровня.   -  person Paweł Fus    schedule 02.06.2015
comment
вот пример: jsfiddle.net/ghh1x7vt/5 В этом примере метки уровня 1 и уровня 2 отображается. Однако, если мы не наведем указатель мыши на диаграмму, трудно понять, что метки данных уровня 2 на самом деле находятся на уровне 2. Поэтому я хочу отличать другие уровни от Level1, динамически изменяя шрифт/непрозрачность (не во время разработки)   -  person Mohan    schedule 02.06.2015
comment
Итак, это примерно так: jsfiddle.net/ghh1x7vt/6? Я думаю, что это нечитаемо, может быть, это зависит от ваших данных.   -  person Paweł Fus    schedule 02.06.2015
comment
Спасибо за помощь. Но я хочу динамически установить шрифт/непрозрачность. По другой проблеме я пытаюсь показать навигационную цепочку с текущим путем в div, когда я разворачиваюсь вниз/вверх. например: Level1.Level2.Level3....и т.д., когда я разворачиваюсь вверх/вниз. Кто-нибудь знает, как это сделать, поскольку события развертки/вниз НЕ работают для древовидной карты.   -  person Mohan    schedule 03.06.2015
comment
Я думаю, что лучшим способом будет использовать dataLabels.formatter и установить встроенный css, например размер шрифта и непрозрачность. Относительно события развертки. Как насчет этого: jsfiddle.net/ghh1x7vt/8 (обертывание drillTo и drillUp) и создание "хлебных крошек" ?   -  person Paweł Fus    schedule 03.06.2015