如何在单击按钮时动态加载带有Chart.js的网格？

Question

我想要做一个动态仪表板，以显示信息，能够选择一个图表来表示它。

在我的项目中，我将angular-gridster2包连接到动态网格https://www.npmjs.com/package/angular-gridster2中。

我使用Chart.js库处理图表。

对于模块的动态插入，我使用ndc-dynamic包https://www.npmjs.com/package/ng-dynamic-component

图的初始加载是正确的，但是当我尝试单击按钮添加另一个带对应图表的块时，网格中的块就会被添加，并且图表不是在新添加的块中呈现，而是在已经找到这样一个图表的同一块中呈现。我不明白为什么会这样。

我在stackblitz https://stackblitz.com/edit/angular-ivy-axd7cw?file=src/app/components/chart-bar/chart-bar.component.html中展示了所有带有工作组件的代码。

有谁可以帮我？

Answer 1

在组件中使用id。在创建图表时，您指的是id选择器。因此，与id选择器匹配的是重呈现第一个组件。

您必须在每次生成组件时生成一个新的id，并以这种方式呈现。

<div class="chart">
  <canvas [attr.id]="id"></canvas>
</div>

组件

id = Math.floor(Math.random() * 1000);

ngAfterViewInit(): void {
  const chartContext = Chart.getChart(this.id.toString());
  if (chartContext !== undefined) {
    chartContext.destroy();
  }

  this.loadLineChart();
}
loadLineChart() {
    this.myChart = new Chart(this.id.toString(), {
      type: 'line',
      ....
    });
}

Note：由于我们是动态地从组件生成id，所以我们将图形绘图代码从ngOnInit移动到ngAfterViewInit (以确保在查询之前在UI上生成和更新id )生命周期钩子.

。