创建多个动态图表 [英] Create multiple dynamic charts

问题描述

我正在开发一个 Web 应用程序 - MEAN 堆栈.我正在尝试使用 ChartJS 圆环图，但我需要它是完全动态的 - 首先，图表的数量是动态的(每个图表代表其他东西)所以有时它会是 3，有时是 20.第二，我希望你能够访问每个图表以实时更改数据.它甚至可能吗?我试图创建一个数组来保存每个图表数据，并使用 *ngFor 为每个图表创建一个画布元素，但它没有用.

我的chartjs.component.ts:

import { Component, OnInit } from '@angular/core';从'../data.service'导入{数据服务}；从'chart.js'导入{图表}；从'chart.piecelabel.js'导入{pieceLabel};从@angular/core"导入{ElementRef}；@成分({选择器:'app-chartjs'，templateUrl: './chartjs.component.html',styleUrls: ['./chartjs.component.css']})导出类 ChartjsComponent 实现 OnInit {构造函数(私有_dataService:数据服务，私有elementRef:ElementRef){}jsons:任何；NumberOfSystems:数量；图表 = [];ngOnInit() {this._dataService.getData().subscribe(data => {this.jsons = 数据this.NumberOfSystems = this.jsons.data[0][1].systems.lengththis.createChartsData()});}创建图表数据(){无功数组=[];for(var i =0; i

这是chartjs.component.html:

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

在这种状态下，ElementRef 为空.

解决方案

在你的

画布...添加#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) 详细查看其中的内容)，您可以使用它来更改数据等.

希望这会有所帮助.

i'm developing a web application - MEAN stack. i'm trying to use ChartJS doughnut chart but i need it to be completely dynamic - first, the number of charts is dynamic (each chart represent something else) so sometimes it will be 3 and sometime 20. second, i want ti be able to access each of the charts for real-time data changing. does it even possible? i tried to create an array that will hold each of the charts data and use *ngFor to create each chart an canvas element but it didn't work.

my 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);
}   
}
}

and this is the chartjs.component.html:

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

in this state, the ElementRef is null.

解决方案

In your

canvas ... add a #yourId

(example : canvas *ngFor="let chart of charts; let i = index" id="canvas{{i}} #yourId")

Then you can use @ViewChildren('yourId') myCharts: any; (you can't use myCharts in ngOnInit, only in ngAfterViewInit and after) which will give you your array of charts.

I won't provide much more detail but you can use what's inside your myCharts (use a console.log(myCharts) to see in detail what's in there), you can use this to change data and so on.

Hope this helps.

这篇关于创建多个动态图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！