1

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

我想我可以使用

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

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

谢谢

4

1 回答 1

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

于 2021-06-07T14:53:35.693 回答