问题描述
我正在开发一个预计会显示此图的项目:http://jsfiddle.net/Kc23N/>
当我点击一个点(工具提示)时,我想显示一个可以理解的日期,而不是以毫秒为单位的值.
我认为需要更改这段代码:
工具提示:{headerFormat: '<b>{series.name}</b><br>',pointFormat: '{point.x} 日期,{point.y} 公斤',}
我该怎么办?任何帮助表示赞赏.
谢谢
您可以使用 moment.js 来获取值格式化,但 Highcharts 有它自己的日期格式化功能,这对 Highcharts 来说更惯用.它可以附加到 highcharts 构造函数中的工具提示选项,如下所示:
工具提示:{格式化程序:函数(){返回<b>"+ this.series.name +'</b><br/>'+Highcharts.dateFormat('%e - %b - %Y',新日期(this.x))+ '日期,' + this.y + '公斤.';}}
您可能还想在 xAxis 下添加带有日期所需选项的 dateTimeLabelFormats 对象.
我用你的代码
做了这个例子I'm developing a project that is expected to show this graph: 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
You can use moment.js to 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:
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 dateTimeLabelFormats object with the options you need for your dates, under the xAxis.
I did this example with your code
这篇关于自定义 highcharts 工具提示以显示日期时间的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!