问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

Highcharts曲线图中null值点无法聚焦？

头像
JereMY307
    413
    新手上路，请多包涵

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

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

    highcharts前端javascriptecharts
    阅读 653
    avatarAI BotBETA

    在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值，用户也能在鼠标悬浮时看到相关的提示信息。

    撰写回答
    你尚未登录，登录后可以
    • 和开发者交流问题的细节
    • 关注并接收问题和回答的更新提醒
    • 参与内容的编辑和改进，让解决方法与时俱进
    推荐问题
    宣传栏