javascript - Highcharts Sunburst 自定义图例和点击功能

Question

Sunburst 自定义图例和点击功能 我有大量关于 sunburst 的数据，我想在右侧显示第 2 级作为图例。由于我知道这些值，我制作了一个自定义图例，将所有 2 级数据作为链接。但我没有得到所有级别的颜色代码。

我用 var colors = Highcharts.getOptions().colors;

但我只得到几个颜色代码。

1. 如何按原样获得图表中使用的全彩色代码？

2. 当我单击该图例时，我只想在图表中显示该级别及其子级别。（图中可用的默认功能相同）。我怎样才能做到这一点 ？

请帮忙

标签： javascripthighchartssunburst-diagram

Answer 1

1. 我在您的代码中添加了一个颜色变量：

   const color = i >= colors.length ? colors[i - colors.length] : colors[i];
   

演示：http: //jsfiddle.net/BlackLabel/qb7ckxwn/

2. 下面是一种方法，如何触发对突出元素的旭日形向下钻取：

   document.getElementById('btn').addEventListener('click', function(){
   chart.series[0].points.forEach(d => {
       if (d.name === 'Asia') {
           chart.series[0].setRootNode(d.id, true, { trigger: 'click' })
       }
   })
   

   })

演示：https ://jsfiddle.net/BlackLabel/t7pghmxd/