Chartjs插件注解时间戳

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

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

代码示例:

  1. annotations.push({
  2. type: 'box',
  3. id: `status-${index}`,
  4. xScaleID: `x-axis-${index}`,
  5. yScaleID: `y-axis-${index}`,
  6. backgroundColor: 'rgba(188, 170, 164, 0.2)',
  7. borderWidth: 0,
  8. xMin: data.linkedTime, // timestamp
  9. xMax: data.unlinkedTime, // timestamp - can be null(till present)
  10. label: {
  11. enabled: true,
  12. fontSize: 12,
  13. drawTime: 'afterDraw',
  14. content: data.name,
  15. xAdjust: 0,
  16. yAdjust: 0,
  17. position: 'top'
  18. }
  19. });

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

  1. xAxes: [
  2. {
  3. type: 'time',
  4. time: {
  5. unit: 'day',
  6. unitStepSize: 1,
  7. displayFormats: {
  8. day: 'MMM DD'
  9. }
  10. }
  11. }
  12. ],

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

slsn1g29

slsn1g291#

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

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

相关问题