如何在 highcharts 深入图表中显示我经过的路径？

【问题标题】：How to show the path that I have traversed in highcharts drilldown chart?如何在 highcharts 深入图表中显示我经过的路径？
【发布时间】：2020-02-05 17:08:17
【问题描述】：

我正在使用具有多个级别的 highcharts 向下钻取图表，我想向用户展示他们在向下钻取图表时所经过的路径。有没有办法在图表旁边显示该路径？

for example https://jsfiddle.net/crxmkgaz/

在这个小提琴中，如果我点击 Chrome，然后点击 v63.0，路径应该显示为 chrome -> v63.0，并且如果用户向上钻取，则应该更新。

ps：我正在使用 react。

提前致谢。

【问题讨论】：

标签： reactjs highcharts react-highcharts

【解决方案1】：

您可以使用drilldown 和drillup 事件来添加有关向下钻取级别的信息，例如以这种方式：

chart: {
  type: 'pie',
  events: {
    drilldown: function(e) {
      var newEl = document.createElement('span');
      newEl.innerText = ' --> ' + e.seriesOptions.name

      path.appendChild(newEl);
    },

    drillup: function() {
      path.children[path.children.length - 1].remove();
    }
  }
}

现场演示： https://jsfiddle.net/BlackLabel/8mLhy31p/

API 参考：

https://api.highcharts.com/highcharts/chart.events.drilldown

https://api.highcharts.com/highcharts/chart.events.drillup

【讨论】：