Angular 2/4/5/6 - แผนภูมิหลายรายการสำหรับ Chart.js ในพื้นที่เดียวกัน

อัปเดต

ฉันใช้แผนภูมิไพรมิงแทนเพื่อแก้ไข

ฉันเริ่มต้นวัตถุแผนภูมิ (ข้อมูล) และใส่ลงในอาร์เรย์ของแผนภูมิ (dataArray)

<div *ngFor="let data of dataArray; let i=index">
    <p-chart #chart type="pie" [data]="dataArray[i]" [options]="optionsArray[i]" width="600" height="600"></p-chart>
  </div>

คำถามเบื้องต้น

คุณจะพิมพ์แผนภูมิหลายแผนภูมิของ Chart.js บนผืนผ้าใบเดียวกันได้อย่างไร

canvas.component.html

<div>
   <canvas #canvas>{{charts}}</canvas>
</div>

canvas.component.ts

export class CanvasComponent implements OnInit, AfterViewInit {

charts: Chart[] = []; //assume populated
@ViewChildren("canvas") canvas;

constructor(){}

ngAfterViewInit() {
  console.log(this.canvas); //gives me a query list?
}

รายการข้อความค้นหามีลักษณะดังนี้:

ปัญหาที่คล้ายกันที่นี่แต่วิธีแก้ปัญหาไม่ชัดเจน ขอขอบคุณสำหรับความช่วยเหลือของคุณ! Chart.js + Angular 5 - สร้างแผนภูมิไดนามิกหลายรายการ< /ก>