Highcharts使用格式化程序更改工具提示日期时间 [英] Highcharts changing tooltip datetime with formatter

问题描述

我有一个如下图所示的图形.默认情况下，每个工具提示值都在其自己的工具提示气泡"中，日期时间位于Y轴的底部(悬停在X标签的顶部).

问题在于Highcharts无法动态更改日期时间的格式以匹配语言环境.我知道我可以让用户更改 dateTimeLabelFormats 来匹配他们的语言环境，但是我希望利用moment.js及其内置的语言环境格式.

我只需要更改这些图表中的日期时间就可以了.

当我在下面尝试此代码时，它为我提供了所需的语言环境杠杆，但是工具提示被合并为1个框，并且没有默认的感觉.

 工具提示:{已启用:true，dateTimeLabelFormats:{//分钟:％e％b％H:％M"，小时:'％e％b％H:％M'}，//用于带有时刻的语言环境控制.结合了momentjs和这个答案https://stackoverflow.com/a/33939715/1177153格式化程序:function(){var toolTipTxt ='< b>'+ moment.unix(this.x/1000).format("LLL")+'</b>';$ .each(this.points，function(i，point){toolTipTxt + ='< br/>< span style ="color:'+ point.series.color +'">'+ point.series.name +':'+ point.y +'</span>';});返回toolTipTxt;}，十字准线:是的，共享:真实}， 

是否可以使用格式化程序来模拟默认工具提示?值的单个气泡"和时间戳在底部徘徊?

是否可以以某种方式将 xDateFormat 与moment.js一起使用?

解决方案

我从

I have a graph that looks like the below. By default each tooltip value is in it's own tooltip "bubble", with the datetime at the bottom of the Y axis (hovering on top of the X labels).

The problem is that changing the format of the datetime to match locale is not dynamic with Highcharts. I know I could have users change the dateTimeLabelFormats to match their locale, but I'm looking to leverage moment.js and their locale formatting built in.

I only need to change the datetime in these charts and nothing else.

When I try this code below, it gives me the locale leverage I'm looking for, but the tooltips are merged into 1 box and doesn't have that same feel as default.

tooltip: {
    enabled: true,
    dateTimeLabelFormats: {
        //minute: '%e %b %H:%M',
        hour: '%e %b %H:%M'
    },
    // For locale control with moment. Combined momentjs with this answer https://stackoverflow.com/a/33939715/1177153
    formatter: function() {
        var toolTipTxt = '<b>'+ moment.unix(this.x / 1000).format("LLL") +'</b>';  
          $.each(this.points, function(i, point) {
            toolTipTxt += '<br/><span style="color:'+ point.series.color +'">  ' + point.series.name + ': ' + point.y+'</span>';
        });
        return toolTipTxt;
    },
    crosshairs: true,
    shared: true
},

Is there a way to emulate default tooltip with the formatter? Individual "bubbles" for the values and the timestamp hovering at the bottom?

Is it possible to use xDateFormat with moment.js somehow?

解决方案

I found a solution that works, right from the Highcharts API documentation for tooltip split.

The jsfiddle example from the API documentation had everything I needed (except moment.js).

I must have overlooked this 100 times today. Here's the final code that worked for me, and a screenshot of the result.

Now the tooltip's header will be in the right locale without the user changing any code.

tooltip: {
    enabled: true,
    // For locale control with moment.js - https://api.highcharts.com/highcharts/tooltip.split
    formatter: function () {
        // The first returned item is the header, subsequent items are the points
        return [moment.unix( this.x / 1000).format("LLL")].concat(
            this.points.map(function (point) {
                return "<span style='color:" + point.series.color + "'>\u25CF</span> " + point.series.name + ': ' + point.y;
            })
        );
    },
    split: true,
},

这篇关于Highcharts使用格式化程序更改工具提示日期时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！