如何通过点击按钮动态加载带有Chart.js的gridster

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，并以这种方式进行渲染。

HTML

<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',
      ....
    });
}

叉式堆垛机

注意：-由于我们是从组件动态生成id，我们必须将图形绘制代码从ngOnInit移动到ngAfterViewInit(以确保在查询之前在UI上生成并更新id(生命周期挂钩。