自定义highcharts工具提示以显示datetime [英] customize highcharts tooltip to show datetime

问题描述

我正在开发一个预期会显示此图表的项目： http://jsfiddle.net/Kc23N/ p>

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

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

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

我该怎么办？

感谢

解决方案

moment.js 以获取格式化的值，但Highcharts具有自己的日期格式化功能，这将更适用于Highcharts。它可以附加到highcharts构造函数中的tooltip选项上，如下所示：

  tooltip：{
 formatter：function ）{
 return'< b>'+ this.series.name +'< / b>< br />'+ 
 Highcharts.dateFormat（'％e  - ％b  - ％ Y'，
 new Date（this.x））
 +'date，'+ this.y +'Kg。 
} 
} 
  

您还可以添加 dateTimeLabelFormats > > /jsfiddle.net/Kc23N/3/\">代码

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工具提示以显示datetime的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！