Ionic с использованием нескольких холстов chart.js на одной странице

У кого-нибудь есть пример использования нескольких холстов на одной странице?

У меня есть что-то подобное в HTML:

<div style="height: 138px" *ngFor="let item of listItems; let i = index">
    <canvas #pieCanvas id="pieCanvas{{i}}" style="width: 100px !important; height: 100px !important"></canvas>
  </div>

В файле .ts:

@ViewChild("pieCanvas") pieCanvas: ElementRef;

for (var j = 0; j < chartcount; j++)
{

   let htmlRef = document.getElementById('pieCanvas'+j);
   this.pieCanvas = new Chart(htmlRef, piechartdata);

}

Получение всегда null не является ошибкой объекта (оценка 'item.length').

Только с одной диаграммой он работает идеально, но там я использую кое-что. как

this.barCanvas = new Chart(this.barCanvas.nativeElement......

Я гуглил, но не нашел решения.

Спасибо за вашу помощь!


ionic-framework canvas chart.js ngfor viewchild
person svha    schedule 05.12.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я нашел решение.... наконец!!!

В HTML:

<canvas #barCanvas id="barCanvaslist{{i}}"></canvas>

Затем в ts: @ViewChildren('barCanvas') Canvaslist: QueryList; графики: любые;

а потом:

this.Canvaslist.changes.subscribe(c => 
{ c.toArray().forEach(item => 
  { 
    this.Canvaslist = new Chart(item.nativeElement, pieData[j]);
    j = j+1;
  }) 
});

это помогает

person svha    schedule 06.12.2019