如何在不单击级别的情况下更改 highcharts 旭日形切片/级别答案

【问题标题】：how to change highcarts sunburst slice/level without clicking levels如何在不单击级别的情况下更改 highcharts 旭日形切片/级别
【发布时间】：2020-04-04 05:51:00
【问题描述】：

我的项目中有一个 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>'
    }
});

问题是

我想在不点击 sunburst 的情况下进入特定关卡。例如，我创建了一个按钮，如果用户单击它，它将执行与单击 Eastern Africa 我的 sunburst 级别相同的操作。

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

clickOnEasternAfrica() 方法应该使用什么代码！？

【问题讨论】：

标签： javascript angular highcharts sunburst-diagram

【解决方案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

【讨论】：