ionic 3 charts.js 处理画布

Question

我有一张如下图

   <canvas
        height="100"
        width="100"
        baseChart
        [chartType]="'bar'"
        [datasets]="chartData"
        [colors]="colors"
        [labels]="chartLabels"
        [options]="chartOptions"
        [legend]="true"
        (chartClick)="onChartClick($event)">
    </canvas>

并且像处理它一样

  @ViewChild(BaseChartDirective)
  public chart: BaseChartDirective;

这一切都很好。除了现在我需要在同一个 html 页面上添加一个新图表，但我不知道如何为另一个图表画布创建另一个句柄。 BaseChartDirective 似乎是通用的。它是如何连接到画布的？

Answer 1

你可以像这样使用ViewChildren：

@ViewChildren(BaseChartDirective) charts: QueryList<BaseChartDirective>;

然后像这样访问第一个和第二个图表：

public myMethod(): void {

  // First canvas
  const firstCanvas = this.charts.toArray()[0];

  // Second canvas
  const secondCanvas = this.charts.toArray()[1];

}

---

请注意

@ViewChildren(BaseChartDirective) charts: QueryList<BaseChartDirective>;

完全一样

@ViewChildren(BaseChartDirective)
public charts: QueryList<BaseChartDirective>;