[英]Create multiple dynamic charts
我正在開發一個Web應用程序-MEAN堆棧。 我正在嘗試使用ChartJS甜甜圈圖,但我需要它是完全動態的-首先,圖表的數量是動態的(每個圖表代表其他東西),因此有時會是3個,有時是20個。第二,我希望能夠訪問每個圖表以實時更改數據。 有可能嗎? 我試圖創建一個數組,該數組將保存每個圖表數據,並使用* ngFor創建每個圖表的canvas元素,但是它不起作用。
我的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。
在你的
畫布...添加#yourId
(示例:canvas * ngFor =“讓圖表圖表;讓i =索引” id =“ canvas {{i}} #yourId”)
然后,您可以使用@ViewChildren('yourId')myCharts:any; (您不能在ngOnInit中使用myCharts,只能在ngAfterViewInit及其之后使用),這將為您提供一系列圖表。
我不會提供更多細節,但是您可以使用myCharts中的內容(使用console.log(myCharts)詳細查看其中的內容),您可以使用它來更改數據等等。
希望這可以幫助。
這是先前提出的解決方案的可能實現之一。 我創建了一個名為“圖表”的數組,該數組將包含與要創建的圖表一樣多的元素。 此數組的每個元素都有一個標識符和稍后在其中放置圖表的鍵(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'), {
// ...
}
})
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.