Angular 13、Chart.js、ng2-chart 动态从 API 更新数据

Question

我正在尝试从 API 动态更新图表数据。我正在使用 Angular 13 和 Chart.Js 3.7.1。

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

我也在网上找到了this示例，但这仍然不起作用。有没有明确的例子/教程？

Answer 1

能够更新图表的数据是一项基本任务，因此 Chart.js 和 ng2-charts（基本上是 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-charts 上的数据（例如，检查

  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()

函数。

Answer 2

从 ng2-chart 文档中实际上并不能立即清楚地了解如何执行此操作。我也在使用 Angular，所以我可以为您提供实现该操作的步骤。

我的假设是您已在模块中安装并加载了 ng2chart 包，并且您想要显示折线图。修改示例以适合图表类型。 从 API 调用检索的数据只是纯数据集数组。这与客户端处理的静态轴标签和选项数据合并。

要动态更新图表（例如通过 API 调用），您需要在 HTML 模板中引用图表对象。

使用 @Viewchild 装饰器来获取对已加载图表的引用。

@ViewChild(BaseChartDirective) chart?: BaseChartDirective;

定义三个图表对象来配置图表。

  lineChartType: ChartType = 'line';
  lineChartData: ChartConfiguration['data'];
  options: ChartConfiguration['options'] = {
    responsive: false
  };

这对应于您的 HTML 模板标记

<canvas baseChart width="800" height="600"
  [type]="lineChartType"
  [data]="lineChartData"
  [options]="options">
</canvas>

在 HTTP 调用的回调中（或者以任何方式检索数据），创建一个匿名“数据集”对象。 注意我尝试强类型化对象，但是我注意到缺少的属性（如backgroundColor）如果不存在则会动态加载，并且此时类泛型对我不利。

  const datasets: any[] = [];

  ChartDataArrayFromYourAPICall.forEach((element:any) => {
    datasets.push({
      label: element.label,
      data: element.data,
    })
  });

接下来，您需要使用新数据集更新绑定属性。

  this.lineChartData = {
    labels: CHARTMONTHSOFYEAR,
    datasets 
  };  

最后从图表参考中调用更新方法。

this.chart?.update();

就是这样。