通过 Chart.js 绘制购买数据（时间与价值）的简单示例

Question

我是 Chart.js 的初学者，我正在尝试绘制以下数据：

const purchaseData = [
                    { name: 'Item A', value: 120, timestamp: '2013-03-15T09:30:00Z' },
                    { name: 'Item B', value:  85, timestamp: '2014-05-20T14:45:00Z' },
                    { name: 'Item C', value: 200, timestamp: '2015-08-10T11:00:00Z' },
                    // ... more data ...
                    { name: 'Item X', value:  75, timestamp: '2016-01-05T16:20:00Z' }
                ];

const ctx = document.getElementById('myChart').getContext('2d'); // defined in the HTML code, not shown here

const chart = new Chart(ctx, {
    type: 'line',
    data: purchaseData.map(item => ({ x: new Date(item.timestamp), y: item.value })),
    options: {
        scales: {
            x: {
                type: 'time',
                time: {
                    unit: 'month'
                }
            }
        }
    }
});

我的数据是按不规则的时间间隔获取的。我想将它们显示为一条线，其中 x 轴代表时间（例如，从 2013-01 到 2016-12），y 轴显示购买的价值。

有什么例子可以实现这一点？

遗憾的是，我没有在互联网上找到任何（有效的）示例。

Answer 1

要在 X 轴上显示时间，您需要一个日期库和 相应的适配器

这是一个同时使用 luxon.js 和 chartjs-adapter-luxon

的示例

const ctx = document.getElementById('myCanvas');

const cfg = {
  type: "line",
  data: {
    datasets: [{
        data: [{
            x: "2013-03-15T09:30:00Z",
            y: 120
          },          
          {
            x: "2014-05-20T14:45:00Z",
            y: 85
          },
          {
            x: "2015-08-10T11:00:00Z",
            y: 200
          },
          {
            x: "2015-09-10T11:00:00Z",
            y: 65
          },         
          {
            x: "2015-10-10T11:00:00Z",
            y: 175
          },
          {
            x: "2015-11-10T11:00:00Z",
            y: 120
          },        
          {
            x: "2015-12-10T11:00:00Z",
            y: 135
          },
          {
            x: "2015-12-25T11:00:00Z",
            y: 55
          },       
          {
            x: "2015-12-31T11:00:00Z",
            y: 150
          },       
          {
            x: "2016-01-05T16:20:00Z",
            y: 75
          },
        ],
      label:'A',
      },
    ]
  },
  options: {
    scales: {    
      x: {
        type: "time",
      }
    }
  }
};

const myLine = new Chart(ctx, cfg);

<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon@^3"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@^1"></script>
<canvas id="myCanvas"></canvas>

PS：您还可以使用 Epoch 和 Unix 时间戳（以毫秒为单位）作为 x 值