我正在开发一个项目,预计将显示此图:http://jsfiddle.net/Kc23N/
当我点击一个点(工具提示)时,我想显示一个可以理解的日期,而不是以毫秒为单位的值。
我认为需要修改这段代码:
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} date, {point.y} Kg',
}
我该怎么做?任何善意的帮助都是感激的。
谢谢
7条答案
按热度按时间0wi1tuuw1#
你可以使用moment.js来格式化这些值,但是Highcharts有自己的日期格式化功能,这在Highcharts中会更习惯。它可以附加到highcharts构造函数中的工具提示选项上,如下所示:
您可能还想在xAxis下添加dateTimeLabelFormats对象,其中包含您需要的日期选项。
我用你的code做了这个示例
kwvwclae2#
您应该在工具提示中使用xDateFormat来自定义日期格式
http://api.highcharts.com/highcharts#tooltip.xDateFormat
63lcw9qa3#
您可以使用
{value:%Y-%m-%d}
模板过滤器。例如:
cvxl0en24#
您需要使用工具提示格式化程序在工具提示中返回格式化的日期。
这里有tooltip formatter API供您参考。
要格式化日期部分,可以使用**
Highcharts.dateFormat()
**该格式是***PHP的strftime***函数格式的子集。
您还可以参考
PHP's strftime
以获取更多日期格式。我设法格式化你的工具提示如下。
carvr3hs5#
我这样做:
例如
ymdaylpp6#
正如Quy Le建议的那样,内置的xDateFormat属性是一种方法,但它对我不起作用。我终于意识到我的问题出在序列数据中,我将Date对象分配给了x值而不是数字(以毫秒为单位的日期)。而不是
{ x: new Date('2020-01-01'), .. }
,它需要是{ x: Date.parse('2020-01-01'), .. }
。在做了这个更改之后,xDateFormat就成功了。这是很坚韧确定的,因为它没有引起任何其他问题的图表(甚至重新格式化我的x轴标签工作正常)。ccrfmcuu7#
更改工具提示添加格式化程序: