angular - Angular 与 Chart.js,不显示数据
问题描述
我在 Angular 组件中显示来自 API 的数据时遇到了一些问题,我不知道出了什么问题,我不知道是我创建图表的方式还是我的方式我正在检索来自 API 的数据,如果你能帮助我,我将非常感激
这是TS代码:
disk: Observable<any>;
free: any;
total: any;
available: any;
constructor(private http: HttpClient, private convertService: ConvertService) {
this.disk = this.getDiskInfo();
this.disk.subscribe(data => {
this.free = this.convertService.formatBytes(data.free);
this.available = this.convertService.formatBytes(data.available);
this.total = this.convertService.formatBytes(data.total);
});
}
ngOnInit(): void {
var myChart = new Chart('diskChart', {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Green'],
datasets: [{
label: '# of Votes',
data: [this.total, this.available, this.free],
backgroundColor: [
'rgba(255, 99, 132)',
'rgba(54, 162, 235)',
'rgba(75, 192, 192)'
]
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
}
getDiskInfo() {
return this.http.get(this.BASE_URL);
}
解决方案
推荐阅读
- bpmn - 如何为用户任务添加自动完成“候选用户,候选组”?
- android - 内容不可见本机基础
- css - 过渡不适用于文本
- php - 如何将2个mysql数据表中的数据列出到html表中
- javascript - 为什么变量总是输出1,即使它在Javascript中递增
- c++ - 当使用模板支持函子作为参数时,我应该使用什么限定符?
- android - Android MVVM:如何在 ViewModel 中通过 LiveData 订阅网络调用
- java - Spring Boot 查询错误的表
- angular - Angular 5 SelectControlValueAccessor 实现错误
- bash - 使用 awk 打印最大的字母数字 grep 结果并按顺序创建变量 next