highcharts xDateFormat字符串不适用于大量数据

k3fezbri  于 2022-11-11  发布在  Highcharts
关注(0)|答案(3)|浏览(168)

我有一个问题,我已经能够在JFiddle上复制。链接:http://jsfiddle.net/h5sSR/

$(function() {
var chart = new Highcharts.StockChart({

    chart: {
        renderTo: 'container'
    },

    tooltip: {
        backgroundColor: {
            linearGradient: {
                x1: 0, 
                y1: 0, 
                x2: 0, 
                y2: 1
            },
            stops: [
                [0, 'white'],
                [1, '#EEE']
            ]
        },
        xDateFormat: '%m/%e/%y %H:%M',
        borderColor: 'gray',
        borderWidth: 1
    },

    rangeSelector: {
        selected: 1
    },

    series: [{
        name: 'USD to EUR',
        data: usdeur
    }]
});
});

问题:我需要在工具提示下始终应用xDateFormat属性(* 月 * / * 日 * / * 年**小时 分钟 *)。当您选择的数据量较少时,它可以完美地工作。当您选择要查看的数据量较大时,它会使用不同的格式。
示例:在JFiddle上试试(上面的链接),它初始化为少量可见的数据,当你悬停时,你会看到如下的日期:12/3/12 0:0。非常好。现在将浏览器拖曳至开头,并将游标停留在图表上,“日期格式”会变更为(周自 * 星期 月日 年 *)。
如何解决:为什么会发生这种情况?如何始终应用xDateFormat属性而不管显示多少数据?

wecizke3

wecizke31#

请看文档:http://api.highcharts.com/highstock#tooltip.xDateFormat
工具提示标题中日期的格式。如果使用数据分组,则默认值为基于最近点的接近程度的智能猜测值。该值从#plotOptions.dataGrouping.dateTimeLabelFormats数组中提取。
因此,您可以在此处找到应更改的内容:http://api.highcharts.com/highstock#plotOptions.series.dataGrouping.dateTimeLabelFormats-适用于所有相同格式的表格,并将工作正常。

gajydyqb

gajydyqb2#

下面是解决这个问题的新代码(在Pawel Fus将我链接到解决方案之后):

plotOptions : {
                    series : {
                        dataGrouping : {
                            dateTimeLabelFormats : {
                                millisecond: ['%m/%e/%y %H:%M', '%m/%e/%y %H:%M', '-%H:%M'],
                                second: ['%m/%e/%y %H:%M', '%m/%e/%y %H:%M', '-%H:%M'],
                                minute: ['%m/%e/%y %H:%M', '%m/%e/%y %H:%M', '-%H:%M'],
                                hour: ['%m/%e/%y %H:%M', '%m/%e/%y %H:%M', '-%H:%M'],
                                day: ['%m/%e/%y %H:%M', '%m/%e/%y %H:%M', '-%H:%M'],
                                week: ['%m/%e/%y %H:%M', '%m/%e/%y %H:%M', '-%H:%M'],
                                month: ['%m/%e/%y %H:%M', '%m/%e/%y %H:%M', '-%H:%M'],
                                year: ['%m/%e/%y %H:%M', '%m/%e/%y %H:%M', '-%H:%M']
                            }
                        }
                    }
                },

这将是“Get 'er done”。下面是更新的JFiddle链接:http://jsfiddle.net/h5sSR/1/

z31licg0

z31licg03#

默认为HighStockchart分组数据. https://api.highcharts.com/highstock/plotOptions.series.dataGrouping.dateTimeLabelFormats
在我的例子中,我只是禁用了数据分组并设置了xDateFormat,它对我很有效

plotOptions: {
        series: {
          dataGrouping: {
            enabled: false
          }
        }
}

相关问题