在Angular 10中使用chart.js创建多个动态堆叠图

Question

我正在尝试创建多个角度图表，但我不确定我尝试实现的方式是否正确，并且我无法创建多个图表，它用另一个替换一个

<div *ngIf="chartData.length !== 0">
<app-limus-utilisation-chart
*ngFor="let entity of chartData" [chartdata]="entity"
></app-limus-utilisation-chart>
</div>

图表组件.ts

getStackedChart() {
const canvas: any = document.getElementById('canvas1');
const ctx = canvas.getContext('2d');

var data = {
labels: this.chartdata.buyernames,

datasets: [{
label: 'Utilised Limit',
data: this.chartdata.utilisedlimitData,
backgroundColor: '#22aa99'
}, {
label: 'Available Limit',
data: this.chartdata.availablelimit,
backgroundColor: '#994499'
}]
}

chartJsLoaded$.pipe(take(1)).subscribe(() => {
setTimeout(() => {
this.myChart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
tooltips: {
mode: 'index',
intersect: true,
position: 'custom',
yAlign: 'bottom'
},
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: false,
display: false
}]
}
}
});
})

})
}

我尝试了两种方法

使用view child未创建图表，创建了getElementById图表，但第二个图表取代了第一个图表。但我想要两张并排的堆叠图，如何实现这个

目前的图表取值低于100，但根据我的实际要求，我需要显示类似(1000000，700000(的tootip金额，也就是货币格式

像这样我试着https://stackblitz.com/edit/angular-chart-js-j26qhm?file=src%2Fapp%2Fapp.component.html

请给建议

在得到答案后，我学到了一些

https://stackblitz.com/edit/angular-chart-js-tyggan

Answer 1

这里的问题是这一行：

const canvas: any = document.getElementById('canvas1');

页面上有多个具有该ID的元素(因为您使用了*ngFor(，所以它总是将自己附加到页面上的第一个元素。

您应该使用Angular的内置@ViewChild，而不是使用getElementByID。

像这样：

chart.com.ponent.html：

<canvas #stackchartcanvas></canvas>

chart.com.component.ts:

@ViewChild("stackchartcanvas") myCanvas: ElementRef<HTMLCanvasElement>;
....
....
....
getStackedChart() {
const canvas = this.myCanvas.nativeElement;
}

堆叠闪电战：https://stackblitz.com/edit/angular-chart-js-kny4en?file=src%2Fapp%2Fchart.component.ts

(此外，在您的原始代码中，每次单击复选框时都会运行this.chartData.push()，即使复选框为false，但这是一个不同的、无关的问题，也已修复。(

Answer 2

您可以使用ViewChild来引用html元素，并在组件内部使用它。我还修改了代码中的一些内容来切换图表。

总结：

1. 使用ViewChild访问组件中的html元素
2. 更新了应用程序组件以切换图表，而不是仅添加数据
3. 更新标签以接受点击事件以切换复选框

看看这个堆栈。

app.component.html

<label>
<input type="checkbox" value=1
(change)="chooseEntity($event.target.checked, 1, entityData[0])">
Microsoft
</label>
<label>
<input type="checkbox" (change)="chooseEntity($event.target.checked, 2, entityData[1])">
IBM
</label>
<div *ngIf="chartData.length !== 0">
<app-limus-utilisation-chart *ngFor="let entity of chartData" [chartdata]="entity"></app-limus-utilisation-chart>
</div>

chart.component.html

<div #chartReport>
<canvas #canvas></canvas>
</div>

图表组件.ts

import {
Component,
ElementRef,
Input,
OnInit,
ViewChild,
ViewEncapsulation
} from "@angular/core";
import { Chart } from "chart.js";
import { OnChanges } from "@angular/core";
@Component({
selector: "app-limus-utilisation-chart",
templateUrl: "./chart.component.html",
encapsulation: ViewEncapsulation.None
})
export class LimusUtilisationChartComponent implements OnInit, OnChanges {
myChart: Chart;
@Input() chartdata: any;
@ViewChild("canvas") stackchartcanvas: ElementRef;
constructor() {}
ngOnChanges() {
this.getStackedChart();
}
ngOnInit(): void {
this.getStackedChart();
}
getStackedChart() {
Chart.Tooltip.positioners.custom = function(elements, position) {
//debugger;
return {
x: position.x,
y:
elements[0]._view.base - (elements[0].height() + elements[1].height())
};
};
const canvas: any = this.stackchartcanvas.nativeElement;
const ctx = canvas.getContext("2d");
var data = {
labels: this.chartdata.buyernames,
datasets: [
{
label: "Utilised Limit",
data: this.chartdata.utilisedlimitData,
backgroundColor: "#22aa99"
},
{
label: "Available Limit",
data: this.chartdata.availablelimit,
backgroundColor: "#994499"
}
]
};
setTimeout(() => {
this.myChart = new Chart(ctx, {
type: "bar",
data: data,
options: {
tooltips: {
mode: "index",
intersect: true,
position: "custom",
yAlign: "bottom"
},
scales: {
xAxes: [
{
stacked: true
}
],
yAxes: [
{
stacked: false,
display: false
}
]
}
}
});
});
}
}