web-dev-qa-db-ja.com

複数の動的チャートを作成する

私はWebアプリケーションを開発しています-MEANスタック。 ChartJSドーナツチャートを使用しようとしていますが、完全に動的である必要があります-まず、チャートの数は動的であるため（各チャートは別のものを表します）、3になることもあれば20になることもあります。次に、できるようにしたいリアルタイムのデータ変更のために各チャートにアクセスします。それも可能ですか？各グラフデータを保持する配列を作成し、* ngForを使用して各グラフにキャンバス要素を作成しようとしましたが、機能しませんでした。

私のchartjs.component.ts：

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
import { Chart } from 'chart.js';
import { pieceLabel } from 'chart.piecelabel.js';
import {ElementRef} from '@angular/core';
@Component({
selector: 'app-chartjs',
templateUrl: './chartjs.component.html',
styleUrls: ['./chartjs.component.css']
})
export class ChartjsComponent implements OnInit {
constructor( private _dataService : DataService, private elementRef: ElementRef) { 

}
jsons: any;
NumberOfSystems: Number;
charts = [];
ngOnInit() {
this._dataService.getData().subscribe(data => {
  this.jsons = data
  this.NumberOfSystems = this.jsons.data[0][1].systems.length
  this.createChartsData()
}); 
}
createChartsData()
{
var array=[];
for(var i =0; i<this.NumberOfSystems;i++)
{
var pie ={
  type: 'doughnut',
  data: {
    labels: ["Disks", "Mgmt", "Hardware", "FC", "Vols&Pols"],
    datasets: [
      {
        backgroundColor:["#008000","#008000","#008000","#008000","#008000"],
        data: [20,20,20,20,20]
      }
    ]
  },
  options: {
    title: {
      display: false
    },
    animations: true,
    tooltips: {
      enabled: true
     },
     legend: {
      display: true
    }
  }
};
array.Push(pie);
}
this.createCharts(array);
}
createCharts(pieData){
for(var j = 0; j<this.NumberOfSystems;j++)
{
  let htmlRef = this.elementRef.nativeElement.select(`#canvas`+j);
  console.log(htmlRef);
  var tempChart = new Chart(htmlRef,pieData[j]);
  this.charts.Push(tempChart);
}   
}
}

これはchartjs.component.html：です

<div>
<canvas *ngFor="let chart of charts; let i = index" id="canvas{{i}}">{{charts}}</canvas>
</div>

この状態では、ElementRefはnullです。

angularchartschart.jsmean-stackangular5
3
Arad Gonen

あなたの中で

キャンバス...＃yourIdを追加します

（例：canvas * ngFor = "let chart of charts; let i = index" id = "canvas {{i}} #yourId"）

次に、@ ViewChildren（ 'yourId'）myCharts：any;を使用できます。 （ngOnInitでmyChartsを使用することはできません。ngAfterViewInit以降でのみ使用できます）これにより、グラフの配列が得られます。

詳細については説明しませんが、myChartsの内容を使用して（console.log（myCharts）を使用して詳細を確認できます）、これを使用してデータを変更することができます。

お役に立てれば。

5
Alvin Chipmunk

これは、以前に提案されたソリューションの可能な実装の1つです。 「チャート」という配列を作成しました。この配列には、作成したいチャートと同じ数の要素が含まれます。この配列の各要素には、後でグラフを配置する場所（AfterViewInit）に識別子とキーがあります。

HTML：

<div>
  <canvas *ngFor="let chart of charts; let i = index" id="mychart{{i}}" #mycharts>{{chart.chart}}</canvas>
</div>

.TS：

 import {Component, OnInit, Input, AfterViewInit, ViewChildren} from '@angular/core';
 import { Chart } from 'chart.js';

 // ...

 @ViewChildren('mycharts') allMyCanvas: any;  // Observe #mycharts elements
 charts: any;    // Array to store all my charts

 constructor() {
   this.charts = [
    {
      "id": "1",   // Just an identifier
      "chart": []            // The chart itself is going to be saved here
    },
    {
      "id": "2",
      "chart": []
    },
    {
      "id": "3",
      "chart": []
    }
  ]
 }

 ngAfterViewInit() {
   let canvasCharts = this.allMyCanvas._results;  // Get array with all canvas
   canvasCharts.map((myCanvas, i) => {   // For each canvas, save the chart on the charts array 
      this.charts[i].chart = new Chart(myCanvas.nativeElement.getContext('2d'), {
        // ...
      }
   })
 }
1
Leonardo Kuffo