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

【问题标题】：customize highcharts tooltip to show datetime自定义 highcharts 工具提示以显示日期时间
【发布时间】：2013-06-06 16:35:43
【问题描述】：

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

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

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

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

我该怎么做？感谢您提供任何帮助。

谢谢

【问题讨论】：

标签： javascript jquery charts highcharts tooltip

【解决方案1】：

您可以使用moment.js 来获取格式化的值，但是Highcharts 有它自己的日期格式化功能，这对于Highcharts 来说会更惯用。它可以像这样附加到 highcharts 构造函数中的工具提示选项上：

        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 对象以及您的日期所需的选项。

我用你的code做了这个示例

【讨论】：

应该显示的代码中的ESEMPIO 文本在哪里？此外，这个答案几乎是 a few hours earlier 发布的答案的副本。

【解决方案2】：

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

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

【讨论】：

干净整洁！

【解决方案3】：

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

举个例子：

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

【讨论】：

headerFormat 去哪儿了？你能提供一个工作样本吗？

【解决方案4】：

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

这是tooltip formatter 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.';
                }
            }

【讨论】：

【解决方案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
        },

【讨论】：

【解决方案6】：

正如 Quy Le 所建议的，内置的 xDateFormat 属性是可行的方法，但它对我不起作用。我终于意识到我的问题在于我将 Date 对象分配给我的 x 值而不是数字（以毫秒为单位的日期）的系列数据。而不是{ x: new Date('2020-01-01'), .. }，它需要是{ x: Date.parse('2020-01-01'), .. }。进行此更改后，xDateFormat 成功了。很难确定，因为它不会导致图表出现任何其他问题（即使重新格式化我的 x 轴标签也可以正常工作）。

【讨论】：