我正在尝试以 Angular 创建多个图表,但我不确定我尝试实现的方式是否正确,而且我无法创建多个图表并将一个图表替换为另一个图表
<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 个值,但根据我的实际要求,我需要显示货币格式的 tootip 金额,如 (1000000, 700000)
像这样我试图实现 https://stackblitz.com/edit/angular-chart-js-j26qhm?file=src%2Fapp%2Fapp.component.html
请给点建议
在得到答案后我做了一些事情
最佳答案
问题是这里的这一行:
const canvas: any = document.getElementById('canvas1');
您在页面上有多个具有该 ID 的元素(因为您使用了 *ngFor),因此它始终将自身附加到页面上的第一个元素。
您应该使用 Angular 的内置 @ViewChild
而不是使用 getElementByID。
像这样:
图表组件.html:
<canvas #stackchartcanvas></canvas>
图表组件.ts:
@ViewChild("stackchartcanvas") myCanvas: ElementRef<HTMLCanvasElement>;
....
....
....
getStackedChart() {
const canvas = this.myCanvas.nativeElement;
}
堆栈 Blitz :https://stackblitz.com/edit/angular-chart-js-kny4en?file=src%2Fapp%2Fchart.component.ts
(此外,在您的原始代码中,每次单击复选框时 this.chartData.push()
都会运行,即使该复选框为假,但这是一个不同的、不相关的问题,它具有也已修复。)
关于javascript - 在 Angular 10 中使用 chart.js 创建多个动态堆叠图表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64377039/