Angular 13，Chart.js，ng2-Chart动态更新API中的数据

Question

我正在尝试从API动态更新图表数据。我用的是角13和图表。Js 3.7.1。

我没有从他们的文档中找到任何简单的例子。

我在网上也找到了这个例子，但这在这里不起作用。有明确的例子/教程吗？

Answer 1

能够更新图表的数据是一项重要任务，因此chart.js和ng2图表(基本上是chart.js的Angular包装器(都发布了明确的示例：

• 在Chart.js 上更新数据

  function addData(chart, label, data) {
  chart.data.labels.push(label);
  chart.data.datasets.forEach((dataset) => {
  dataset.data.push(data);
  });
  chart.update();
  }
  

• 更新ng2图表上的数据(例如，检查randomize()功能(

  public randomize(): void {
  for (let i = 0; i < this.lineChartData.datasets.length; i++) {
  for (let j = 0; j < this.lineChartData.datasets[i].data.length; j++) {
  this.lineChartData.datasets[i].data[j] = LineChartComponent.generateNumber(i);
  }
  }
  this.chart?.update();
  }
  

在这两种情况下，要更新数据，需要修改data数组。请记住，必须在数据更新后立即显式调用update()函数。