Highcharts改变与格式化工具提示的日期时间

问题描述 投票:2回答:1

我有一个看起来像下面的图表。默认情况下每个工具提示值是在它自己的工具提示“泡沫”,与在Y轴(悬停在X标签的顶部)的底部的日期时间。

default tooltip

问题是,改变日期时间相匹配的区域设置的格式不是动态的,Highcharts。我知道我可以让用户改变dateTimeLabelFormats,以满足他们的语言环境,但我正在寻找利用moment.js和他们的语言环境格式化内置的。

我只需要更改这些图表,并没有别的日期时间。

当我尝试下面这段代码,它给我的区域影响力,我在寻找,但提示合并成1盒,不具有觉得默认的相同。

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

moment.js locale formatting

有没有一种方法来模拟默认提示与格式?个人“泡沫”的价值观和时间戳在底部徘徊?

是否有可能使用xDateFormat与moment.js不知何故?

javascript highcharts tooltip momentjs
1个回答
2
投票

我发现这样的作品,从一Highcharts API documentation for tooltip split的解决方案。

jsfiddle example from the API documentation有我需要的一切(除了moment.js)。

我必须今天这个100倍忽视。下面是对我工作的最终代码,结果的截图。

现在,工具提示的头会在正确的区域设置未经用户更改任何代码。

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

enter image description here

© www.soinside.com 2019 - 2024. All rights reserved.