Highcharts fold/unfold 瀑布

Question

我使用 Highcharts watefall（和用于多种测量的堆叠瀑布），它非常强大。我想用动态 fold/unfold 获得更好的渲染效果。在以下示例中：https://jsfiddle.net/vegaelce/4x1ndpjr/ 我会默认隐藏所有 california/colorado/dc 列（只有小计和总计列可见），当鼠标悬停在 Subtotal/Total 列上时，会显示专用的 california/colorado/dc 列。

我觉得我可以用

  plotOptions: {
column: {
  point: {
    events: {
      mouseOver: function() {
      ...
      }
      mouseOut: function() {
      ...
      }
    }}}}

但是如何隐藏不是 isIntermediateSum 的列并只显示与 isIntermediateSum 相关的列呢？

谢谢

Answer 1

您可以为 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()
    },
    ...
});

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

API参考：https://api.highcharts.com/highcharts/xAxis.breaks

Highcharts fold/unfold 瀑布

Highcharts fold/unfold waterfall

waterfall

fold

highcharts

unfold