Question

对我来说，dateTimeLabelFormats根据时间选择显示不一致的日期格式。

下面是网址

http://jsfiddle.net/46bk7pvm/2/

在上述URL中，当我选择6个月时，它以正确的日期格式反映出来。就是'%Y-%m'。但是，当我选择1个月或3个月时，它将反映为日期：'%Y<br/>%m-%d'，格式。但这应该是month: '%Y-%m'的月份格式。

月份的缩写，应该是

month: '%Y-%m',

选择日期应该是

day: '%Y<br/>%m-%d',

并且应该是

year: '%Y'

这是代码块

Highcharts.stockChart('container', {

    xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: {
            second: '%Y-%m-%d<br/>%H:%M:%S',
            minute: '%Y-%m-%d<br/>%H:%M',
            hour: '%Y-%m-%d<br/>%H:%M',
            day: '%Y<br/>%m-%d',
            week: '%Y<br/>%m-%d',
            month: '%Y-%m',
            year: '%Y'
        }
    },

    rangeSelector: {
        selected: 1
    },

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

如何根据时间段选择动态设置上述日期格式？

Answer 1

http://jsfiddle.net/BlackLabel/wxpfc2k5/根据xAxis刻度之间最接近的间隔距离定义格式。当您单击1M时，您只有四个星期的数据，因此，如果只有四个dataLabel的空间，则会应用week格式。如果您有更多空间（更宽的图表），则将使用day格式，等等。

您想要的可能是单击按钮后更改标签上的格式：API

摘要（仅1M按钮！）

rangeSelector: {
  selected: 1,
  buttons: [{
    type: 'month',
    count: 1,
    text: '1m',
    events: {
      click: function() {
        chart.xAxis[0].update({
          labels: {
            format: '{value:%Y-%m}' // change format on click
          }
        });
      }
    }
  }, {
    type: 'month',
    count: 3,
    text: '3m'
  }, {
    type: 'month',
    count: 6,
    text: '6m'
  }, {
    type: 'ytd',
    text: 'YTD'
  }, {
    type: 'year',
    count: 1,
    text: '1y'
  }, {
    type: 'all',
    text: 'All'
  }]
}

有关标签格式的更多信息，请参见docs和MongoDB documentation。

Answer 2

谢谢PawełFus对格式化程序的建议。

我通过将日期格式分配给格式化程序解决了我的问题。这是代码。

labels: {
                overflow: false,
                align: "center",
                style: _xaxis_label_style,
                step: _step,
                staggerLines: _staggerLines,
                x: 0,
                enabled: true,
                useHTML: term_useHTML,
                formatter: function () {
                    if ($j(".hdnSelection").val() == "today") {
                        return Highcharts.dateFormat(dateformatlable.hour, this.value);
                    }
                    else {
                        var key = "1month"; //default case
                        if (typeof $j('.hdnSelectionmonth') !== "undefined" && $j('.hdnSelectionmonth').val() != '') {
                            key = $j('.hdnSelectionmonth').val();
                        }
                        var duration = key.substring(1);
                        switch (duration.toLowerCase()) {
                            case "day":
                                return Highcharts.dateFormat(dateformatlable.day, this.value);

                            case "week":
                                return Highcharts.dateFormat(dateformatlable.week, this.value);

                            case "month":
                                return Highcharts.dateFormat(dateformatlable.month, this.value);

                            case "year":
                                return Highcharts.dateFormat(dateformatlable.year, this.value);
                                break;
                            case "ytd":
                                return Highcharts.dateFormat(dateformatlable.year, this.value);

                            default:
                                return Highcharts.dateFormat(dateformatlable.day, this.value);
                        }
                    }
                }
            },
showLastLabel: true

Answer 3

您可以从tickPositionInfo获取选定的unitName并将其应用到标签格式化程序中：

xAxis: {
  type: 'datetime',
  labels: {
    formatter: function() {
      const format = {
        second: '%Y-%m-%d<br/>%H:%M:%S',
        minute: '%Y-%m-%d<br/>%H:%M',
        hour: '%Y-%m-%d<br/>%H:%M',
        day: '%Y<br/>%m-%d',
        week: '%Y<br/>%m-%d',
        month: '%Y-%m',
        year: '%Y'
      }[this.tickPositionInfo.unitName];
      return  Highcharts.dateFormat(format, this.value);
    }
  }
}

根据时间选择动态更改dateTimeLabelFormats

3 个答案: