Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angular/29.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何在不单击标高的情况下更改highcarts sunburst切片/标高_Javascript_Angular_Highcharts_Sunburst Diagram - Fatal编程技术网

Javascript 如何在不单击标高的情况下更改highcarts sunburst切片/标高

Javascript 如何在不单击标高的情况下更改highcarts sunburst切片/标高,javascript,angular,highcharts,sunburst-diagram,Javascript,Angular,Highcharts,Sunburst Diagram,在我的项目中,我有一个太阳风暴海图。我想知道是否可以在不点击它们的情况下更改级别。 例如,我有一个像这样的太阳爆发,它有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' }, {

在我的项目中,我有一个太阳风暴海图。我想知道是否可以在不点击它们的情况下更改级别。 例如,我有一个像这样的太阳爆发,它有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>'
    }
});

var数据=[{
id:'0.0',
父项:“”,
名称:“世界”
}, {
id:'1.3',
父项:“0.0”,
名称:"亚洲"
}, {
id:'1.1',
父项:“0.0”,
名称:“非洲”
}, {
id:'1.2',
父项:“0.0”,
名称:“美国”
}, {
id:'1.4',
父项:“0.0”,
名称:“欧洲”
}, {
id:'1.5',
父项:“0.0”,
名称:“海洋”
},
/*非洲*/
{
id:'2.1',
父项:“1.1”,
名称:“东非”
},
{
id:'3.1',
家长:“2.1”,
名称:“埃塞俄比亚”,
价值:104957438
}, {
id:'3.2',
家长:“2.1”,
名称:“坦桑尼亚”,
价值:57310019
}, {
id:'3.3',
家长:“2.1”,
名称:'肯尼亚',
价值:49699862
}, {
id:'3.4',
家长:“2.1”,
名称:“乌干达”,
价值:42862958
}, {
id:'3.5',
家长:“2.1”,
名称:“莫桑比克”,
价值:29668834
}, {
id:'3.6',
家长:“2.1”,
名称:“马达加斯加”,
价值:25570895
}, {
id:'3.226',
家长:'2.22',
名称:“萨摩亚”,
价值:196440
}, {
id:'3.227',
家长:'2.22',
名称:“汤加”,
价值:108020
}, {
id:'3.228',
家长:'2.22',
名称:“美属萨摩亚”,
价值:55641
}, {
id:'3.229',
家长:'2.22',
名称:'库克群岛',
价值:17380
}, {
id:'3.230',
家长:'2.22',
名称:“沃利斯和富图纳”,
价值:11773
}, {
id:'3.231',
家长:'2.22',
名称:“图瓦卢”,
价值:11192
}, {
id:'3.232',
家长:'2.22',
名称:"纽埃",,
价值:1618
}, {
id:'3.233',
家长:'2.22',
名称:“托克劳”,
价值:1300
}];
//以透明方式拼接中心圆
Highcharts.getOptions().colors.splice(0,0,'transparent');
Highcharts.chart('容器'{
图表:{
身高:“100%”
},
标题:{
正文:“2017年世界人口”
},
副标题:{
文本:“源维基百科”
},
系列:[{
类型:“太阳风暴”,
数据:数据,
allowDrillToNode:true,
光标:“指针”,
数据标签:{
格式:“{point.name}”,
过滤器:{
属性:“innerArcLength”,
运算符:“>”,
价值:16
}
},
级别:[{
级别:1,
levelIsConstant:false,
数据标签:{
过滤器:{
属性:“outerArcLength”,
运算符:“>”,
数值:64
}
}
}, {
级别:2,
colorByPoint:正确
},
{
级别:3,
颜色变化:{
键:“亮度”,
至:-0.5
}
}, {
级别:4,
颜色变化:{
键:“亮度”,
至:0.5
}
}]
}],
工具提示:{
首字母:“,
pointFormat:“{point.name}的填充为{point.value}”
}
});
问题是 我想在不点击sunburst的情况下进入特定的关卡。例如,我创建了一个按钮,如果用户单击它,它将执行与我单击“东非”时相同的操作

点击这里


我应该为
ClickOneAsternaRica()
method!使用什么代码

您可以使用
fireEvent
触发
单击
事件:

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

现场演示:

API参考: