jQuery 自定义 highcharts 工具提示以显示日期时间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17033752/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
customize highcharts tooltip to show datetime
提问by SkyNet_citizen
I'm developing a project that is expected to show this graph: http://jsfiddle.net/Kc23N/
我正在开发一个预计会显示此图的项目：http: //jsfiddle.net/Kc23N/
When I click a point (tooltip) I want to show a date understandable, not the value in milliseconds.
当我点击一个点（工具提示）时，我想显示一个可以理解的日期，而不是以毫秒为单位的值。
I think needs to change this piece of code:
我认为需要更改这段代码：
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} date, {point.y} Kg',
}
how do I do? any kind help is appreciated.
我该怎么办？任何帮助表示赞赏。
Thanks
谢谢
回答by rscnt
You can use moment.jsto get the values formatted, but Highcharts has it's own date formatting functionality which would be more idiomatic with Highcharts. It can be attached onto the tooltip option in the highcharts constructor like so:
您可以使用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.';
}
}
You may want to also add the dateTimeLabelFormatsobject with the options you need for your dates, under the xAxis.
您可能还想在 xAxis 下添加带有日期所需选项的dateTimeLabelFormats对象。
I did this example with your code
我用你的代码做了这个例子
回答by Quy Le
You should use xDateFormat in tooltip for customizing your format date
http://api.highcharts.com/highcharts#tooltip.xDateFormat
您应该在工具提示中使用 xDateFormat 来自定义您的格式日期
http://api.highcharts.com/highcharts#tooltip.xDateFormat
sample:
tooltip: {
xDateFormat: '%Y-%m-%d'
},
回答by Wang Xiao
You can use {value:%Y-%m-%d}template filter.
您可以使用{value:%Y-%m-%d}模板过滤器。
For an example:
例如：
headerFormat: '<span style="font-size: 10px">{point.key:%Y-%m-%d}</span><br/>'
回答by Gopinagh.R
You need to return a formatted date in the tooltip using tooltip formatter .
您需要使用 tooltip formatter 在工具提示中返回格式化的日期。
Here is the tooltip formatter APIfor your reference.
这是工具提示格式化程序 API供您参考。
For formatting the date part, you can make use of Highcharts.dateFormat()
对于格式化日期部分，您可以使用 Highcharts.dateFormat()
The format is a subset of the formats for PHP's strftimefunction.
该格式是PHP 的 strftime函数格式的一个子集。
You can also refer PHP's strftimefor more date formats.
您还可以参考PHP's strftime更多日期格式。
I managed to format your tooltip as below.
我设法将您的工具提示格式化如下。
tooltip: {
formatter: function() {
return '<b>' + this.series.name +'</b><br/>' +
Highcharts.dateFormat('%e - %b - %Y',
new Date(this.x))
+ ' <br/>' + this.y + ' Kg.';
}
}
