创建多个动态图表 [英] Create multiple dynamic charts
问题描述
我正在开发Web应用程序-MEAN堆栈.我正在尝试使用ChartJS甜甜圈图,但我需要它是完全动态的-首先,图表的数量是动态的(每个图表代表其他东西),因此有时会是3个,有时是20个.第二,我希望能够访问每个图表以进行实时数据更改.甚至有可能吗?我试图创建一个数组来保存每个图表数据,并使用* ngFor来创建每个图表一个canvas元素,但是它不起作用.
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.
我的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为空.
in this state, the ElementRef is null.
推荐答案
在您的
画布...添加#yourId
canvas ... add a #yourId
(示例:canvas * ngFor =让图表变成图表;让我= index" id ="canvas {{i}} #yourId")
(example : canvas *ngFor="let chart of charts; let i = index" id="canvas{{i}} #yourId")
然后,您可以使用@ViewChildren('yourId')myCharts:any; (您不能在ngOnInit中使用myCharts,只能在ngAfterViewInit及其之后使用),这将为您提供一系列图表.
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.
我将不提供更多详细信息,但是您可以使用myCharts中的内容(使用console.log(myCharts)可以查看其中的详细信息),也可以使用它来更改数据,依此类推.
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.
希望这会有所帮助.
这篇关于创建多个动态图表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!