在 highcharts 树图中的各种向下钻取中动态更改字幕？

Question

我的树状图中有 5 个向下钻取级别，我想在每个向下钻取时更改副标题。我遇到了这段代码：

chart.setTitle({ text: drilldownTitle + e.point.name });

这对柱形图很有效，但我在树图中以数组格式存储数据并且没有向下钻取 ID，我如何才能为树图实现此功能。

     $('#container').highcharts({
            series: [{
                type: "treemap",
                layoutAlgorithm: 'squarified'
}],

 subtitle: {
            text: 'Click points to drill down </a>.'
        },
        title: {
            text: 'TreeMap Sample'
        }
}],

Answer 1

不幸的是，Highcharts 不提供像 drillupToNode 和 drilldownToNode 这样的事件来简化图表标题的操作。

解决方法：

我将title-handling逻辑添加到drillToNode函数并覆盖它：

H.seriesTypes.treemap.prototype.drillToNode = function(id, redraw) {
  var series = this,
    chart = series.chart,
    nodeMap = series.nodeMap,
    node = nodeMap[id],
    title;
  series.idPreviousRoot = series.rootNode;
  series.rootNode = id;

  if (id === '') {
    series.drillUpButton = series.drillUpButton.destroy();
    title = chart.userOptions.title.text;
  } else {
    series.showDrillUpButton((node && node.name || id));
    title = node.name;
  }

  chart.setTitle({
    text: title
  }, null, false);

  this.isDirty = true; // Force redraw
  if (pick(redraw, true)) {
    this.chart.redraw();
  }
}

原始函数可以在这个link中找到：https://github.com/highcharts/highcharts/blob/master/js/modules/treemap.src.js

使用此代码时不再需要

point.events.click，但图表需要初始定义 chart.title.text 属性。

现场演示： https://jsfiddle.net/BlackLabel/7toez0n5/

在 highcharts 树图中的各种向下钻取中动态更改字幕？

Dynamically changing subtitles at various drilldowns in treemap in highcharts?

highcharts

treemap

subtitle

drilldown