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

umuewwlo  于 2023-06-22  发布在  Chart.js
关注(0)|答案(2)|浏览(155)

我想将一个图表配置为具有不同的时区(例如,我在utc+00,并希望在utc+01显示数据)
有办法吗?根据文档,我必须返回一个moment对象,然后根据moment全局区域设置显示日期。

qc6wkl3g

qc6wkl3g1#

在时间配置选项中,指定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');
}
nle07wnf

nle07wnf2#

我在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被弃用了,显然有更好的库在那里,但这是我在我的代码库,所以...

相关问题