在 highcharts 树图中的各种向下钻取中动态更改字幕?
Dynamically changing subtitles at various drilldowns in treemap in highcharts?
我的树状图中有 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'
}
}],
不幸的是,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
属性。
我的树状图中有 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'
}
}],
不幸的是,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
属性。