Angular Chart.js 多画布

Question

下面的代码只能用于图表，但我必须制作多个图表。如何使以下代码成为图表数组并在 Canvas 中使用 *ngFor 显示。

@ViewChild('pr_chart') chartElementRef: ElementRef;

ngAfterViewInit() {
  let ctx = this.chartElementRef.nativeElement;
  ctx = ctx.getContext('2d');

  this.chart = new Chart(ctx, {
    type: 'line',
    options: {
      legend: {
        display: false
      },
      scales: {
        xAxes: [{
          display: false
        }],
        yAxes: [{
          display: false
        }],
      }
    },
    data: {
      labels: [1500, 1600, 1700, 1750, 1800, 1850, 1900, 1950, 1999, 2050],
      datasets: [{
        data: [86, 378, 106, 306, 507, 111, 133, 221, 783, 5000],
        // label: "Africa",
        borderColor: '#3bd19c',
        fill: false
      }]
    }
  });
}

<canvas #pr_chart></canvas>

Answer 1

您可以使用@ViewChildren 来获取<canvas #pr_chart></canvas> 实例的多个引用。我整理了一个示例，展示了如何使用上面的示例：https://stackblitz.com/edit/angular-chartjs-multiple-charts。

基本上我的控制器上有一组图表元素：

chartData: Chart.ChartData[] = [
  {
    labels: ['1500', '1600', '1700', '1750', '1800', '1850', '1900', '1950', '1999', '2050'],
    datasets: [{
      data: [86, 378, 106, 306, 507, 111, 133, 221, 783, 5000],
      borderColor: 'red',
      fill: false
    }]
  },
  {
    labels: ['1500', '1600', '1700', '1750', '1800', '1850', '1900', '1950', '1999', '2050'],
    datasets: [{
      data: [86, 378, 106, 306, 507, 111, 133, 221, 783, 5000].reverse(),
      borderColor: 'blue',
      fill: false
    }]
  }
];

这些用于在我的模板中呈现多个图表：

<div *ngFor="let data of chartData" class="chart">
  <canvas #pr_chart></canvas>
</div>

您可以使用@ViewChildren 获取每个pr_chart 实例，而不是仅使用@ViewChild 获取单个引用：

@ViewChildren('pr_chart', { read: ElementRef }) chartElementRefs: QueryList<ElementRef>;

一旦我们有了这些引用，我们就可以遍历它们，通过使用该引用和相关数据来创建适当的图表：

ngAfterViewInit() {
  this.charts = this.chartElementRefs.map((chartElementRef, index) => {
    const config = Object.assign({}, baseConfig, { data: this.chartData[index] });

    return new Chart(chartElementRef.nativeElement, config);
  });
}

由于在我的示例中，我将复制每个图表的大部分配置并且只有数据发生变化，因此我创建了一个基本配置，在渲染每个图表时共享它：

const baseConfig: Chart.ChartConfiguration = {
  type: 'line',
  options: {
    responsive: true,
    maintainAspectRatio: false,
    legend: { display: false },
    scales: {
      xAxes: [{ display: false }],
      yAxes: [{ display: false }],
    }
  }
};