javascript - Highcharts 使用格式化程序更改工具提示日期时间
问题描述
我有一个如下图所示的图表。默认情况下,每个工具提示值都在它自己的工具提示“气泡”中,日期时间位于 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 文档中找到了一个可行的解决方案。
API 文档中的jsfiddle 示例拥有我需要的一切(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,
},
推荐阅读
- vue.js - Nuxt Apollo SSR 查询依赖于另一个查询的结果
- c++ - C++ 指针,输出
- ios - jonkykong/SideMenu 在 Xcode 11.3 和 iOS 13 中不起作用
- javascript - 协议缓冲区 - 分配嵌套消息
- ember.js - Ember js 中的 URL 映射
- html - 如何在 Sass 中使用带有#id 的“目标”标签?
- hybris - 如何通过OCC实现文件下载功能?
- git-rewrite-history - BFG Repo-Cleaner - 如何删除某些文件夹以外的文件夹
- python-3.x - 散景服务返回白页
- python - Python - 使用另一个数组的数组子集,得到 IndexError