根据时间选择动态更改 dateTimeLabelFormats

Question

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

下面是URL

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

在上面 URL 中，当我 select 6 个月时，它以正确的日期格式反映。即 '%Y-%m'。但是当我 select 1 个月或 3 个月时，它反映了日期：'%Y<br/>%m-%d'，格式。但它应该是月份格式，即 month: '%Y-%m'.

月份 selection 的简称应该是

month: '%Y-%m',

天 select离子应该是

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
    }]
});

我们如何根据时间段动态设置上述日期格式selection.?

Answer 1

dateTimeLabelFormats 根据最近的距离定义 xAxis 刻度的格式。当您单击 1M 时，您只有四个星期的数据，因此如果只有四个数据标签的空间，则将应用 week 格式。如果您有更多 space（更宽的图表），则将使用 day 格式等

您想要的可能是在单击按钮后更改标签上的格式：http://jsfiddle.net/BlackLabel/wxpfc2k5/

代码段（只有 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'
  }]
}

有关标签格式的更多信息，请参阅 API and docs。

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

Change dateTimeLabelFormats dynamically based on time selection

javascript

jquery

highcharts

highstock