Angular 6 多个动态 Charts.js 未显示

Question

我正在尝试为我的单身汉的最终项目制作一个动态图表页面。 首先，我在 SQL 中有一个指标数据库，它是通过这种方式检索的。

getmetrics(flag = 2) {
  this.metricService.getmetrics()
  .subscribe(res => {
    this.metricService.metrics = res as metric[];
    for (let metric of this.metricService.metrics) {
      metric.canvas = "canvas" + metric.id_metric;
    }
    if (flag == 2) {
      for (let i = 0; i < this.metricService.metrics.length; i++) {
        //here we create the chart with createCharts(metric);
        this.metricService.metrics[i] = this.createCharts(this.metricService.metrics[i]);

  }
}

Flag 用于在视图初始化后创建图表，

ngOnInit() {
  this.getmetrics(1);
}
ngAfterViewInit() {
  this.getmetrics(2);
}

创建图表现在看起来像这样，以确保这只是前端的问题。

createCharts(metric) {
    metric.chart = new Chart(metric.canvas, {
    type: 'bar',
    data: {
      labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
      datasets: [{
        label: '# of Votes',
        data: [12, 24, 3, 5, 2, 3],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
          'rgba(255,99,132,1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      }
    }
  });
  return metric;
}

HTML 如下所示：

    <div class="col-6 metric" *ngFor="let metric of metricService.metrics">
        <h5>{{metric.nombre}}</h5>
        <div *ngIf = "metric.canvas">
            <canvas id="{{metric.canvas}}">{{ metric.chart }}</canvas>
        </div>
    </div>

但结果是下面的图片 没有静态图表的结果应该是这样的，但在其他每个画布上都有第一个图表。 带有静态图表的结果图片另外，重要的是要说静态画布的结果中的结果如下

<canvas _ngcontent-c2="" id="canvas0" width="450" height="225" class="chartjs-render-monitor" style="display: block; width: 450px; height: 225px;"></canvas>

动态（和目标）画布中的结果是

<canvas _ngcontent-c2="" id="canvas2"></canvas>

希望这能有所帮助，如果我在途中犯了一些错误，请对我的英语感到抱歉。

Answer 1

我做的有点不同。 我没有在*ngFor中创建 canvas 标签，而是在组件代码中动态创建了图表画布。

const wrapper = document.getElementById('chart-wrapper');
const newCanvas = document.createElement('canvas');
newCanvas.id = metric.canvas;
wrapper.appendChild(newCanvas);
const ctx = (newCanvas as HTMLCanvasElement).getContext('2d');
this.lineChart = new Chart(ctx, chartOptions);