元素
元素
工具
博客
问答

Highcharts 的 tooltip 怎么自定义显示格式？

照南酱~ 阅读 100
交互

我在用 Highcharts 做一个折线图，想在 tooltip 里同时显示日期和数值，但默认只显示数值。试过用 tooltip.formatter，但不知道怎么拿到原始数据里的日期字段。

我的数据是这种格式：

series: [{
    data: [
        { x: Date.UTC(2023, 0, 1), y: 29.9 },
        { x: Date.UTC(2023, 0, 2), y: 71.5 }
    ]
}]

怎么在 tooltip 里把日期格式化成 “2023-01-01: 29.9” 这样的字符串？

我来解答 赞 9 收藏
二维码
手机扫码查看
反馈
2 条解答
书生シ弯弯
书生シ弯弯 Lv1
要在 Highcharts 的 tooltip 中自定义显示格式，并且显示日期和数值，你需要利用 tooltip.formatter 函数来自定义内容。具体来说，Highcharts 的 tooltip.formatter 允许你返回一个字符串作为 tooltip 的内容，你可以在这个函数中访问图表的数据点信息，包括日期（x 轴值）和数值（y 轴值）。

以下是解决这个问题的具体步骤：

1. 使用 tooltip.formatter: 首先，你需要设置 tooltip.formatter 为一个函数。这个函数会在每次 tooltip 显示时被调用，并且会传入一个包含当前数据点信息的对象。

2. 获取数据点信息: 在 formatter 函数内部，你可以通过 this.x 获取日期（因为你在数据中将日期设为 x 轴值），通过 this.y 获取数值。

3. 格式化日期: 由于 x 轴值是以毫秒为单位的时间戳（通过 Date.UTC 创建的），你需要将其转换为可读的日期格式。可以使用 JavaScript 的 Date 对象来进行格式化。

4. 返回格式化的字符串: 最后，将格式化后的日期和数值拼接成你想要的字符串格式，并从 formatter 函数中返回。

下面是具体的代码实现：

Highcharts.chart('container', {

    chart: {

        type: 'line'

    },

    series: [{

        data: [

            { x: Date.UTC(2023, 0, 1), y: 29.9 },

            { x: Date.UTC(2023, 0, 2), y: 71.5 }

        ]

    }],

    tooltip: {

        formatter: function () {

            // 创建一个新的 Date 对象，使用 this.x 作为时间戳

            var date = new Date(this.x);

            

            // 使用 toISOString() 方法将日期转换为 ISO 格式，然后截取前 10 个字符得到 YYYY-MM-DD 格式

            var formattedDate = date.toISOString().slice(0, 10);

            

            // 拼接日期和数值，形成最终的 tooltip 字符串

            return formattedDate + ': ' + this.y;

        }

    }

});


在这段代码中，我们做了如下几件事：
- 定义了一个 Highcharts 图表，类型为折线图。
- 设置了 series.data，其中每个数据点都有 x 和 y 属性。
- 在 tooltip.formatter 函数中，我们创建了一个 Date 对象来处理 x 轴值，并使用 toISOString() 方法来格式化日期。这里我们只需要年月日部分，所以用了 slice(0, 10) 来截取。
- 最后，将格式化后的日期和数值拼接成所需的字符串格式，并返回。

这样，当你将鼠标悬停在图表上的数据点时，tooltip 就会按照你指定的格式显示日期和数值了。希望这能帮到你！
点赞
2026-03-23 18:08
Des.慧玲
Des.慧玲 Lv1
最简单的办法是用 tooltip.formatter 拿到 point.x 和 point.y，然后格式化日期。代码如下：
pre class="pure-highlightjs line-numbers">tooltip: {
formatter: function() {
return Highcharts.dateFormat('%Y-%m-%d', this.x) + ': ' + this.y;
}
}
点赞
2026-03-23 11:04
相关推荐
元素
元素
工具
博客
问答
登录/注册