как изменить срез / уровень солнечных лучей Highcarts, не нажимая на уровни - PullRequest
Новая
       24

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

0 голосов
/ 04 апреля 2020

В моем проекте есть 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>'
    }
});

Проблема в

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

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

Что код, который я должен использовать для clickOnEasternAfrica() метода!?

1 Ответ

0 голосов
/ 06 апреля 2020

Вы можете использовать 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

...