как изменить слайс/уровень солнечных лучей highcarts, не нажимая уровни

У меня есть Sunburst Highcharts в моем проекте. Мне было интересно, можно ли изменить уровень, не нажимая на них. например, у меня есть такие солнечные лучи, которые имеют 4 уровня.

var data = [{
    id: '0.0',
    parent: '',
    name: 'The World'
}, {
    id: '1.3',
    parent: '0.0',
    name: 'Asia'
}, {
    id: '1.1',
    parent: '0.0',
    name: 'Africa'
}, {
    id: '1.2',
    parent: '0.0',
    name: 'America'
}, {
    id: '1.4',
    parent: '0.0',
    name: 'Europe'
}, {
    id: '1.5',
    parent: '0.0',
    name: 'Oceanic'
},

/* Africa */
{
    id: '2.1',
    parent: '1.1',
    name: 'Eastern Africa'
},

{
    id: '3.1',
    parent: '2.1',
    name: 'Ethiopia',
    value: 104957438
}, {
    id: '3.2',
    parent: '2.1',
    name: 'Tanzania',
    value: 57310019
}, {
    id: '3.3',
    parent: '2.1',
    name: 'Kenya',
    value: 49699862
}, {
    id: '3.4',
    parent: '2.1',
    name: 'Uganda',
    value: 42862958
}, {
    id: '3.5',
    parent: '2.1',
    name: 'Mozambique',
    value: 29668834
}, {
    id: '3.6',
    parent: '2.1',
    name: 'Madagascar',
    value: 25570895
}, {
    id: '3.226',
    parent: '2.22',
    name: 'Samoa',
    value: 196440
}, {
    id: '3.227',
    parent: '2.22',
    name: 'Tonga',
    value: 108020
}, {
    id: '3.228',
    parent: '2.22',
    name: 'American Samoa',
    value: 55641
}, {
    id: '3.229',
    parent: '2.22',
    name: 'Cook Islands',
    value: 17380
}, {
    id: '3.230',
    parent: '2.22',
    name: 'Wallis and Futuna',
    value: 11773
}, {
    id: '3.231',
    parent: '2.22',
    name: 'Tuvalu',
    value: 11192
}, {
    id: '3.232',
    parent: '2.22',
    name: 'Niue',
    value: 1618
}, {
    id: '3.233',
    parent: '2.22',
    name: 'Tokelau',
    value: 1300
}];

// Splice in transparent for the center circle
Highcharts.getOptions().colors.splice(0, 0, 'transparent');


Highcharts.chart('container', {

    chart: {
        height: '100%'
    },

    title: {
        text: 'World population 2017'
    },
    subtitle: {
        text: 'Source <href="https://en.wikipedia.org/wiki/List_of_countries_by_population_(United_Nations)">Wikipedia</a>'
    },
    series: [{
        type: "sunburst",
        data: data,
        allowDrillToNode: true,
        cursor: 'pointer',
        dataLabels: {
            format: '{point.name}',
            filter: {
                property: 'innerArcLength',
                operator: '>',
                value: 16
            }
        },
        levels: [{
            level: 1,
            levelIsConstant: false,
            dataLabels: {
                filter: {
                    property: 'outerArcLength',
                    operator: '>',
                    value: 64
                }
            }
        }, {
            level: 2,
            colorByPoint: true
        },
        {
            level: 3,
            colorVariation: {
                key: 'brightness',
                to: -0.5
            }
        }, {
            level: 4,
            colorVariation: {
                key: 'brightness',
                to: 0.5
            }
        }]

    }],
    tooltip: {
        headerFormat: "",
        pointFormat: 'The population of <b>{point.name}</b> is <b>{point.value}</b>'
    }
});

Проблема в том,

Я хочу перейти на определенные уровни, не нажимая на солнечные лучи. например, я создаю кнопку, которая, если пользователь нажмет на нее, выполнит то же действие, как если бы я нажимал на Eastern Africa уровень моего солнечного света.

<button onclick="clickOnEasternAfrica()">Do click here</button>

Какой код следует использовать для метода clickOnEasternAfrica()!?


person Reza Torkaman Ahmadi    schedule 04.04.2020    source источник


Ответы (1)


Вы можете использовать fireEvent для запуска события click:

document.getElementById('easternAfrica').addEventListener('click', function(){
  var series = chart.series[0];
  Highcharts.fireEvent(series, 'click', { point: series.points[6] });
});

Текущая демонстрация: https://jsfiddle.net/BlackLabel/dLb5hert/

Справочник по API: https://api.highcharts.com/class-reference/Highcharts#.fireEvent%3CT%3E

person ppotaczek    schedule 06.04.2020