Highcharts 折叠/展开瀑布

如何解决Highcharts 折叠/展开瀑布

我使用 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()
    },...
});

---

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

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