Highcharts 使用格式化程序更改工具提示日期时间

2024-04-20

我有一个如下图所示的图表。默认情况下,每个工具提示值都位于其自己的工具提示“气泡”中,日期时间位于 Y 轴底部(悬停在 X 标签顶部)。

问题在于,更改日期时间的格式以匹配区域设置对于 Highcharts 来说不是动态的。我知道我可以让用户更改dateTimeLabelFormats以匹配他们的语言环境,但我希望利用 moment.js 及其内置的语言环境格式。

我只需要更改这些图表中的日期时间,无需更改其他内容。

当我尝试下面的代码时,它为我提供了我正在寻找的区域设置杠杆,但工具提示被合并到 1 个框中,并且没有与默认相同的感觉。

tooltip: {
    enabled: true,
    dateTimeLabelFormats: {
        //minute: '%e %b %H:%M',
        hour: '%e %b %H:%M'
    },
    // For locale control with moment. Combined momentjs with this answer https://stackoverflow.com/a/33939715/1177153
    formatter: function() {
        var toolTipTxt = '<b>'+ moment.unix(this.x / 1000).format("LLL") +'</b>';  
          $.each(this.points, function(i, point) {
            toolTipTxt += '<br/><span style="color:'+ point.series.color +'">  ' + point.series.name + ': ' + point.y+'</span>';
        });
        return toolTipTxt;
    },
    crosshairs: true,
    shared: true
},

有没有办法用格式化程序模拟默认工具提示?值和时间戳的单独“气泡”悬停在底部?

是否可以使用xDateFormat以某种方式使用 moment.js ?


我找到了一个有效的解决方案,直接从用于工具提示拆分的 Highcharts API 文档 https://api.highcharts.com/highcharts/tooltip.split.

The API 文档中的 jsfiddle 示例 https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/tooltip/formatter-split/拥有我需要的一切(除了 moment.js)。

我今天肯定忽略了这一点100次了。这是对我有用的最终代码以及结果的屏幕截图。

现在,工具提示的标题将位于正确的区域设置中,而无需用户更改任何代码。

tooltip: {
    enabled: true,
    // For locale control with moment.js - https://api.highcharts.com/highcharts/tooltip.split
    formatter: function () {
        // The first returned item is the header, subsequent items are the points
        return [moment.unix( this.x / 1000).format("LLL")].concat(
            this.points.map(function (point) {
                return "<span style='color:" + point.series.color + "'>\u25CF</span> " + point.series.name + ': ' + point.y;
            })
        );
    },
    split: true,
},
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Highcharts 使用格式化程序更改工具提示日期时间 的相关文章

随机推荐