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

Question

我正在开发一个项目,预计会显示这个图:http://jsfiddle.net/Kc23N/

当我点击一个点(工具提示)时,我想显示一个可以理解的日期,而不是以毫秒为单位的值.

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

tooltip: {
      headerFormat: '<b>{series.name}</b><br>',
      pointFormat: '{point.x} date, {point.y} Kg',                        
}

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

谢谢

Answer 1

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

        tooltip: {
            formatter: function() {
                return  '<b>' + this.series.name +'</b><br/>' +
                    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

您可以使用{value:%Y-%m-%d}模板过滤器.

举个例子:

headerFormat: '<span style="font-size: 10px">{point.key:%Y-%m-%d}</span><br/>'

Answer 4

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

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

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

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

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

我设法格式化您的工具提示,如下所示.

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

Answer 5

我这样做：

headerFormat: '{point.x:%e %b %H:%M}'

例如

"tooltip": {
            outside: true,
            split: false,
            shared: true,
            useHTML: true,
            headerFormat: '{point.x:%e %b %H:%M}',
            pointFormat: '<p style="font-size:12px;margin:0px;padding-top:1px;padding-bottom:1px;color:{series.color};">{series.name} <strong>{point.y}</strong></p>',
            valueDecimals: 2,
            backgroundColor: 'black',
            borderWidth: 0,
            style: {
                width: '150px',
                padding: '0px'
            },
            shadow: false
        },