问题描述
我使用 Highcharts 瀑布(以及用于多种测量的堆叠瀑布),它非常强大。 我想通过动态折叠/展开获得更好的渲染。 在以下示例中:https://jsfiddle.net/vegaelce/4x1ndpjr/ 我会默认隐藏所有 california/colorado/dc 列(仅显示 Subtotals 和 Total 列),当鼠标悬停在 Subtotal/Total 列上时,会显示专用的 california/colorado/dc 列。
我觉得我可以用
plotOptions: {
column: {
point: {
events: {
mouSEOver: function() {
...
}
mouSEOut: function() {
...
}
}}}}
但是如何隐藏不是 isIntermediateSum 的列并仅显示与 isIntermediateSum overed 相关的列?
谢谢
解决方法
您可以对 x 轴使用中断并根据悬停点动态更新图表。示例:
function generateBreaks(hoveredX) {
const breaks = [];
for (let i = 3; i < 12; i += 4) {
if (hoveredX !== i) {
breaks.push({
breakSize: 0,from: i - 0.5 - 3,to: i - 0.5
});
}
}
return breaks;
};
Highcharts.chart('container',{
xAxis: {
...,breaks: generateBreaks()
},...
});