Highcharts 折叠/展开瀑布

Question

我使用 Highcharts 瀑布（以及用于多种测量的堆叠瀑布），它非常强大。 我想通过动态折叠/展开获得更好的渲染。 在以下示例中：https://jsfiddle.net/vegaelce/4x1ndpjr/ 我会默认隐藏所有 california/colorado/dc 列（只有小计和总计列可见），当鼠标悬停在小计/总计列上时，会显示专用的 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