我正在使用Angular,已经安装了,chart.js
但是图表未显示在页面中。
这是我的代码:
dasboard.component.html
<canvas id="myChart" width="400" height="400"></canvas>
dashboard.component.ts
import { Component, OnInit } from '@angular/core';
import { Chart } from 'chart.js'
@Component({
selector: 'dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {
ngOnInit() {
var myChart = new Chart('myChart', {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
}
}
当我做
console.log('hello');
在dashboard.component.t
s中,它正在控制台中打印,但是图形未显示如何解决此问题?
您的代码很好,只需将包含canvas
到中div
,它将显示出来。
<div>
<canvas id="myChart" width="400" height="400"></canvas>
</div>
请看看下面的StackBlitz
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句