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

66bbxpm5  于 2023-06-23  发布在  Highcharts
关注(0)|答案(7)|浏览(160)

我正在开发一个项目,预计将显示此图:http://jsfiddle.net/Kc23N/
当我点击一个点(工具提示)时,我想显示一个可以理解的日期,而不是以毫秒为单位的值。
我认为需要修改这段代码:

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

我该怎么做?任何善意的帮助都是感激的。
谢谢

0wi1tuuw

0wi1tuuw1#

你可以使用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做了这个示例

kwvwclae

kwvwclae2#

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

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

63lcw9qa3#

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

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

cvxl0en24#

您需要使用工具提示格式化程序在工具提示中返回格式化的日期。
这里有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.';
                }
            }
carvr3hs

carvr3hs5#

我这样做:

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

ymdaylpp6#

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

ccrfmcuu

ccrfmcuu7#

更改工具提示添加格式化程序:

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

相关问题