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

我正在开发一个项目，预计将显示以下图表：

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

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

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

工具提示：{
headerFormat:“{series.name}
”，
pointFormat:'{point.x}日期，{point.y}Kg'，
}

我该怎么办？感谢您的帮助

谢谢

您可以使用它来格式化值，但是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.';
            }
        }

工具提示：{
格式化程序：函数（）{
返回“+this.series.name+”
+
Highcharts.dateFormat（“%e-%b-%Y”，
新日期（this.x））
+“日期，”+这个.y+“千克”；
}
}

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

---

我用你的做了这个示例，你需要使用工具提示格式化程序在工具提示中返回格式化日期

这是你的参考资料

要格式化日期部分，可以使用

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

您还可以参考更多的日期格式

我设法将你的工具提示格式化如下

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

工具提示：{
格式化程序：函数（）{
返回“+this.series.name+”
+
Highcharts.dateFormat（“%e-%b-%Y”，
新日期（this.x））
+“
”+this.y+Kg”；
}
}

您可以使用

{值：%Y-%m-%d}

模板筛选器

例如：

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

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

您应该在工具提示中使用xDateFormat自定义格式日期

我这样做：

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

例如

“工具提示”：{
外：是的，
split:false，
分享：是的，
是的，
headerFormat:“{point.x:%e%b%H:%M}”，
pointFormat:“
{series.name}{point.y}
”，
数值小数：2，
背景颜色：“黑色”，
边框宽度：0，
风格：{
宽度：“150px”，
填充：“0px”
},
影子：错
},

正如Quy-Le所建议的，内置的xDateFormat属性是一个不错的选择，但它不适合我。我终于意识到，我的问题是在序列数据中，我将日期对象分配给了我的x值，而不是数字（以毫秒为单位的日期）。它需要是

{x:Date.parse（'2020-01-01'），…}

而不是

{x:newdate（'2020-01-01'），…}

。在做了这个更改之后，xDateFormat完成了这个任务。很难确定，因为它不会对图表造成任何其他问题（甚至我的x轴标签的重新格式化也可以正常工作）。

HeadPerformat去哪里了？您能提供一个工作示例吗？代码中的

ESEMPIO

文本应该显示在哪里？此外，这个答案几乎是一个副本张贴。干净整洁！

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