时间戳

首页 > 解决方案 > HighChart - 在悬停时显示 null 的工具提示

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

问题描述

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

小提琴：https ://jsfiddle.net/wmoxLy4r/2/

我想做的是：

1/ 允许悬停在空值上

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

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

标签： highcharts

解决方案

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

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 +
                "'>●&lt;/span> Line series: <b>" + point.y + "</b><br/>";
        }
    }

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

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

推荐阅读