自定义highcharts工具提示以显示日期时间

我正在开发一个预计会显示此图表的项目： http ： //jsfiddle.net/Kc23N/

当我点击一个点（工具提示）时，我想显示一个可理解的日期，而不是以毫秒为单位的值。

我认为需要改变这段代码：

tooltip: { headerFormat: '{series.name}
', pointFormat: '{point.x} date, {point.y} Kg', } 

我该怎么办？ 任何善意的帮助表示赞赏。

谢谢

Answer 1

您可以使用moment.js来获取格式化的值，但Highcharts拥有自己的日期格式化function，这对于Highcharts来说更加惯用。 它可以附加到highcharts构造函数中的tooltip选项，如下所示：

  tooltip: { formatter: function() { return '' + this.series.name +'
' + Highcharts.dateFormat('%e - %b - %Y', new Date(this.x)) + ' date, ' + this.y + ' Kg.'; } } 

您可能还希望在xAxis下添加dateTimeLabelFormats对象以及日期所需的选项。

我用你的代码做了这个例子

Answer 2

您应该在工具提示中使用xDateFormat来自定义格式日期
http://api.highcharts.com/highcharts#tooltip.xDateFormat

 sample: tooltip: { xDateFormat: '%Y-%m-%d' }, 

Answer 3

您需要使用tooltip formatter在工具提示中返回格式化日期。

以下是工具提示格式化程序API供您参考。

要格式化日期部分，可以使用Highcharts.dateFormat()

格式是PHP strftime函数格式的子集。

您还可以参考PHP's strftime以获取更多日期格式。

我设法格式化您的工具提示，如下所示。

  tooltip: { formatter: function() { return '' + this.series.name +'
' + Highcharts.dateFormat('%e - %b - %Y', new Date(this.x)) + ' 
' + this.y + ' Kg.'; } } 

Answer 4

您可以使用{value:%Y-%m-%d}模板filter。

举个例子：

 headerFormat: '{point.key:%Y-%m-%d}
'