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

customize highcharts tooltip to show datetime

本文关键字：日期 时间 显示 高图 工具提示 自定义      更新时间：2023-09-26

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

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

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

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

我该怎么办?如有任何帮助，不胜感激。

谢谢

你可以使用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对象，其中包含您需要的日期选项。

我用你的代码

做了这个例子

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

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

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

例如:

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

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

这里是工具提示格式化器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.';
                }
            }

我这样做:

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
        },

正如Quy Le建议的那样，内置的xDateFormat属性是可行的方法，但它不适合我。我最终意识到，问题出在系列数据中，我将Date对象分配给x值而不是数字(以毫秒为单位的日期)。而不是{ x: new Date('2020-01-01'), .. }，它需要{ x: Date.parse('2020-01-01'), .. }。做了这个更改之后，xDateFormat完成了任务。这很难确定，因为它没有引起图表的任何其他问题(甚至我的x轴标签的重新格式化工作得很好)。

在工具提示中添加格式化器:

tooltip: {
            borderRadius: 5,
            useHTML: true,
            formatter: function () {
      var date = new Date(this.x);
      var year = date.getFullYear();
                return '<div class="tooltip_box"><div><span class="seriesHeading">' + year  +
                    '</span> </div> <span class="seriesName">' + this.series.name +
                    ': </span><span class="seriesPoint" style="color:' + this.series.color + '; ">' + this
                        .y + '</span></div>';
            }
        },

以上解决方案都很好，但如果你想在工具提示的标题部分显示日期，你可以这样做

在headerFormatter中，您可以通过{point.key}获得格式化的日期

所以代码是:

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

如果你想进一步格式化日期，你可以添加属性xDateFormat

所以代码是这样的: 
tooltip: {
               headerFormat: '<b>{series.name}, Date: {point.key}</b><br>',
               pointFormat: '{point.y} Kg'
               xDateFormat: '%B, %Y',
         }

目前支持以下格式:

* %a: Short weekday, like 'Mon'.
* %A: Long weekday, like 'Monday'.
* %d: Two digit day of the month, 01 to 31.
* %e: Day of the month, 1 through 31.
* %b: Short month, like 'Jan'.
* %B: Long month, like 'January'.
* %m: Two digit month number, 01 through 12.
* %y: Two digits year, like 09 for 2009.
* %Y: Four digits year, like 2009.
* %H: Two digits hours in 24h format, 00 through 23.
* %I: Two digits hours in 12h format, 00 through 11.
* %l (Lower case L): Hours in 12h format, 1 through 11.
* %M: Two digits minutes, 00 through 59.
* %p: Upper case AM or PM.
* %P: Lower case AM or PM.
* %S: Two digits seconds, 00 through 59
相关文章：