鼠标悬停时自动 fold/unfold Y 轴中断

Question

我需要构建一个带有 Y 轴中断的“基本”柱形图（水平或垂直）。我使用此处提供的示例 https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/axisbreak/break-visualized/ 来实现这一点，结果很好。现在我需要在列上展开鼠标上的 Y 轴（以显示带有原始大小的 Y 轴的图表）。我添加了一些事件来做到这一点：

plotOptions: {
 column: {
  point: {
    events: {
      mouseOver: function(){
        const chart = this,
        yAxis = chart.series.yAxis;
        yAxis.update({
          breaks: [],
        });
      },
      mouseOut: function(){
        const chart = this,
        yAxis = chart.series.yAxis;
        yAxis.update({
          breaks: breakarray,
        });
      }
    }
   }
  }

作业已完成，结果似乎不错，您可以在此处的 jsfiddle 中看到它 https://jsfiddle.net/vegaelce/wd5nhcqg/

第 1 点：我希望 Y 轴上的 // 和列中的中断符号在鼠标悬停在列上（图表展开）时消失。然后在鼠标移出事件中，需要再次绘制中断符号（// 和列中的符号）。怎么做？

第二点：使用我的方法，当鼠标悬停在每一列上时会触发事件。我更希望事件仅在受中断轴影响的列（带有中断符号的列）上触发，而不是在其他列上触发。可能吗？

我尝试使用事件但没有成功。

提前致谢

Answer 1

请参考以下代码。对于第一点，我将 brokenAxis.breakArray 添加到 this.breakArray 并在鼠标事件中使用了 setColumnBreaksVisibility 函数。对于第二点，我更改了 mouseOver 函数以有条件地清除中断。

Highcharts.wrap(Highcharts.Axis.prototype, 'getLinePath', function(proceed, lineWidth) {
    ...
    (this.breakArray || []).forEach(function(brk) { 
        ...
    });
    ...
});

function pointBreakColumn(e) {
    ...
    if (!point[key]) {
        point.breakKey = key;
        ...
    } else {
        ...
    }
}

function setColumnBreaksVisibility(series, show) {
    series.forEach(function(s) {
        s.points.forEach(function(point) {
            if (point.breakKey) {
                point[point.breakKey][show ? 'show' : 'hide']()
            }
        });
    });
}

Highcharts.chart('container', {
    ...
    plotOptions: {
        column: {
            point: {
                events: {
                    mouseOver: function() {
                        const point = this,
                            allSeries = point.series.chart.series,
                            yAxis = point.series.yAxis;

                        if (this.breakKey) {
                            setColumnBreaksVisibility(allSeries);
                            yAxis.update({
                                breaks: []
                            });
                        }
                    },
                    mouseOut: function() {
                        const point = this,
                            allSeries = point.series.chart.series,
                            yAxis = point.series.yAxis;

                        if (!point.breakArray) {
                            yAxis.update({
                                breaks: breakarray,
                            });
                            setColumnBreaksVisibility(allSeries, true);
                        }
                    }
                }
            }
        }
    }

});

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

API参考：

https://api.highcharts.com/class-reference/Highcharts.SVGElement#hide

https://api.highcharts.com/class-reference/Highcharts.SVGElement#show

鼠标悬停时自动 fold/unfold Y 轴中断

Automatic fold/unfold Y-axis break on mouse over

highcharts

mouseevent

axis