如何解决ng2-chart在Angular 10中未显示图表
我正在尝试将图表添加到我的应用程序中,但是由于某些原因,我的图表未加载。
在DOM中,我可以看到正在制作的元素,但是我看到它被设置为== $ 0,我不理解。
我正在使用Angular Material,但这对我认为显示的图表没有影响。
所以我根本看不到图表。我在做什么错了?
charts.component.html
<div>
<div>
<div style="display: block">
<canvas baseChart
width="800" height="400"
[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[plugins]="barChartPlugins"
[legend]="barChartLegend"
[chartType]="barChartType">
</canvas>
</div>
<button mat-button mat-raised-button color="primary" (click)="randomize()">Update</button>
</div>
</div>
charts.component.ts
import { Component,OnInit } from '@angular/core';
import { ChartOptions,ChartType,ChartDataSets } from 'chart.js';
import * as pluginDataLabels from 'chartjs-plugin-datalabels';
import 'chartjs-plugin-datalabels'
import { Label } from 'ng2-charts';
@Component({
selector: 'app-charts',templateUrl: './charts.component.html',styleUrls: ['./charts.component.scss']
})
export class ChartsComponent implements OnInit {
public barChartOptions: ChartOptions = {
responsive: false,// We use these empty structures as placeholders for dynamic theming.
scales: { xAxes: [{}],yAxes: [{}] },plugins: {
datalabels: {
anchor: 'end',align: 'end',}
}
};
public barChartLabels: Label[] = ['2006','2007','2008','2009','2010','2011','2012'];
public barChartType: ChartType = 'bar';
public barChartLegend = true;
public barChartPlugins = [pluginDataLabels];
public barChartData: ChartDataSets[] = [
{ data: [65,59,80,81,56,55,40],label: 'Series A' },{ data: [28,48,40,19,86,27,90],label: 'Series B' }
];
constructor() { }
ngOnInit() {
}
// events
public chartClicked({ event,active }: { event: MouseEvent,active: {}[] }): void {
console.log(event,active);
}
public chartHovered({ event,active);
}
public randomize(): void {
// Only Change 3 values
const data = [
Math.round(Math.random() * 100),(Math.random() * 100),40];
this.barChartData[0].data = data;
}
}
解决方法
我认为这是兼容性问题,您可以尝试使用ng-chartjs软件包而不是ng2-chartjs。
ng-chart.js
否则,您可以尝试更新现有软件包。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。