javascript - Highcharts曲线图中null值点如何设置鼠标悬浮显示特定文案？

Question

Highcharts曲线图，当数据为null时，鼠标无法聚焦这个点

在plotOptions的series和line中都加了connectNulls: true ，没用。
怎么样才能让这个值为null的点，鼠标悬浮显示特定的文案

Answer 1

在Highcharts中，当数据点包含null值时，默认情况下这些点不会被绘制在图表上，因此鼠标悬浮时也无法触发这些点的工具提示（tooltip）。但是，你可以通过一些技巧来实现即使数据为null时，也能在鼠标悬浮时显示特定的文案。

一种方法是使用plotOptions.series.dataLabels来显示文本，但这通常用于直接在数据点旁边显示文本，而不是在鼠标悬浮时。对于鼠标悬浮显示特定文案，更合适的方法是使用tooltip的formatter函数。

在tooltip的formatter函数中，你可以检查当前点的值是否为null，如果是，则返回你想要的特定文案。这里是一个基本的示例：

Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    yAxis: {
        title: {
            text: 'Value'
        }
    },
    plotOptions: {
        series: {
            connectNulls: true,
            // 可以在这里设置其他选项
        },
        line: {
            // 注意：plotOptions中通常不需要直接设置line，除非有特定配置
        }
    },
    series: [{
        name: 'Sales',
        data: [1, null, 3, 4, 5, null, 7, 8, 9, 10, 11, 13]
    }],
    tooltip: {
        formatter: function () {
            if (this.y === null) {
                // 如果y值为null，返回特定的文案
                return 'No data available for ' + this.x;
            } else {
                // 否则，返回正常的工具提示文案
                return 'The value for ' + this.x + ' is ' + this.y;
            }
        }
    }
});

在这个示例中，tooltip.formatter函数检查当前点的y值是否为null。如果是，它返回一个包含特定文案的字符串；否则，它返回一个包含正常值的字符串。这样，即使数据点包含null值，用户也能在鼠标悬浮时看到相关的提示信息。