HighChart - 悬停时显示 null 的工具提示

Question

我的 HighCharts 折线图中有一个空值。我设置了connectNulls: true，这样当数据为空时，线路不会断开。但是我不能将鼠标悬停在那个空值上。当我尝试时，它会自动跳转到最近的非空点。

Fiddle: https://jsfiddle.net/wmoxLy4r/2/

我想做的是：

1/ 允许悬停在空值上

2/ 当悬停在空值上时，我想在左侧显示最接近的非空值的值。在这种情况下，它将显示 129.2.

我考虑过将空值与最接近的非空值放在其左侧，但由于 2 个周期具有相同的值，因此该部分的图将是平坦的。我希望情节看起来像现在一样。感谢任何帮助

Answer 1

您可以预处理数据并计算中间点。空点没有标记，因此无法为其显示工具提示。

const data = [...];

const processedData = data.map((dataEl, index) => {
    if (!dataEl) {
        return {
            y: (data[index - 1] + data[index + 1]) / 2,
            isCalculatedValue: true,
            marker: {
                fillColor: 'red',
                radius: 1
            }
        }
    }

    return dataEl;
});

通过使用tooltip.formatter函数，您可以在工具提示中显示之前的点值。

    tooltip: {
        formatter: function(tooltip) {
            let point = this.point;

            if (point.isCalculatedValue) {
                point = this.series.points[point.index - 1];
            }

            return "<span style='font-size: 10px'>" + point.category + "</span><br/>" +
                "<span style='color:" + point.series.color +
                "'>●</span> Line series: <b>" + point.y + "</b><br/>";
        }
    }

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

API参考：https://api.highcharts.com/highcharts/tooltip.formatter

HighChart - 悬停时显示 null 的工具提示

HighChart - show tooltips for null on hover

highcharts