Chartjs插件注解时间戳

1qczuiv0  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(258)

我正在使用Chart.Js“2.8.0”和chartjs-plugin-annotation“0.5.7”来显示基于时间戳间隔的框
我试图说明这样的东西:x1c 0d1x,但无法从它们的文档中找到内容。
结果是......:

代码示例:

annotations.push({
    type: 'box',
    id: `status-${index}`,
    xScaleID: `x-axis-${index}`,
    yScaleID: `y-axis-${index}`,
    backgroundColor: 'rgba(188, 170, 164, 0.2)',
    borderWidth: 0,
    xMin: data.linkedTime, // timestamp
    xMax: data.unlinkedTime, // timestamp - can be null(till present)
    label: {
        enabled: true,
        fontSize: 12,
        drawTime: 'afterDraw',
        content: data.name,
        xAdjust: 0,
        yAdjust: 0,
        position: 'top'
    }
});

图表X轴(使用dayjs let labels = items.map(({ time }) => this.$dayjs.unix(time));):

xAxes: [
    {
        type: 'time',
        time: {
            unit: 'day',
            unitStepSize: 1,
            displayFormats: {
                day: 'MMM DD'
            }
        }
    }
],

我的猜测是,我应该格式化xMin/xMAx值相应的xaxis(daysjs的东西),尝试了一些东西('Oct 31'this.$dayjs.unix(timestamp)),但它不工作...我猜我错过了一些东西

slsn1g29

slsn1g291#

Chart.js使用自epoch以来定义为毫秒的时间戳Source
使用.valueOf()从dayjs获取时间戳(以毫秒为单位)。Source

xMin: dayjs(...).valueOf(),
xMax: dayjs(...).valueOf(),

相关问题