chart.js - 在 Chart.js 中使用一系列纪元时间戳按月分组

Question

我有一个纪元时间戳列表，我想使用 chart.js 绘制图表。

[1432317109519, 1432318109519, 1432319109519, ...]

分组为数据提供给chart.js，即每次在Y轴上是一个单位：

[{
  x: 1432317109519,
  y: 1
},{
  x: 1432318109519,
  y: 1
},{
  x: 1432319109519,
  y: 1
}]

我正在尝试将每个时间戳的 chart.js 舍入到最近的月份：

  chartOptions = {
    type: 'line',
    scales: {
      x: {
        type: 'time',
        time: {
          unit:  'month',
          round: 'month'
        }
      }
    }
  }

这样做时，我的所有 y 轴都是 1。我试图在一个月内获得所有值的总和。我是否误解了“圆形”属性的作用？

标签： chart.jsng2-charts

Answer 1

在 v3 中，您需要一个日期适配器，并且比例已更改，所有更改请阅读迁移指南

const options = {
  type: 'line',
  data: {
    datasets: [{
      label: '# of Votes',
      data: [{
        x: 1632664467243,
        y: 5
      }, {
        x: 1611664467243,
        y: 10
      }],
      borderColor: 'pink'
    }]
  },
  options: {
    scales: {
      x: {
        type: 'time',
        time: {
          unit: 'month',
          round: 'month'
        }
      }
    }
  }
}

const ctx = document.getElementById('tt').getContext('2d');
new Chart(ctx, options);

<canvas id="tt"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>

编辑：

从那一刻起适配器自述文件：

npm install moment chartjs-adapter-moment --save

import { Chart } from 'chart.js';
import 'chartjs-adapter-moment';

new Chart()