Question

我想将一个图表配置为具有不同的时区（例如我在utc + 00中显示并希望以utc + 01显示数据）

有办法吗？根据文档，我必须返回一个时刻对象，然后根据时刻全局区域显示日期。

Answer 1

在时间配置选项中，将parser指定为函数：

                scales: {
                    xAxes: [{
                        type: 'time',
                        time: {
                            unit: 'hour',
                            min: minDate,
                            max: maxDate,
                            displayFormats: {
                                hour: 'HH'
                            },
                            parser: function (utcMoment) {
                                return utcMoment.utcOffset('+0100');
                            }                
                        }
                    }]

除转换图表值外，这也适用于x轴的最小值/最大值。

这假设您的最小/最大值和标签数组填充了时刻对象。如果处理日期对象，那么函数需要先将日期转换为片刻。

parser: function(date) {
    return moment(date).utcOffset('+0100');
}

Answer 2

我在 ticks 函数上使用回调。这样您只需更改标签。

import Moment from 'moment';

//...

const options = {
    scales: {
      xAxes: [{
        type: 'time',
        ticks: {
          callback: (label, index, ticks) => {
            const format = 'DD HH'; // Change how you please
            return new Moment(ticks[index].value)
              .utcOffset(this.timeZoneOffsetSeconds / 60)
              .format(format);
          }
        }
      }]
    },
    // other options removed for clarity
  };
  
this.chart = new Chart(chartElem, {
  options: options,
  // other parameters removed for clarity
});

注意示例：Moment 已弃用，显然有更好的库，但这就是我的代码库中的内容，所以...

chart.js - 显示控制时间刻度时区

2 个答案: