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

tuwxkamq 于 2023-10-18 发布在 Chart.js

关注(0)|答案(1)|浏览(141)

我是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轴显示购买的价值。
什么样的例子能让这一点发挥作用？
遗憾的是，我在互联网上没有找到任何（工作）的例子。

chart.js

来源：https://stackoverflow.com/questions/76959982/simple-example-for-plotting-purchase-data-time-vs-value-via-chart-js

1条答案

按热度按时间

ars1skjm1#

要在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值，单位为毫秒

赞(0）回复(0）举报 2023-10-18

我来回答

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

1条答案

相关问题

热门标签

最新问答