Ручка 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>;