离子 3 图表.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>;