I had a similar issue, it turned out I was referencing an old example.
First, as you've already correctly done, install the library using NPM:
npm install chart.js --save
Then, in your component, import the library:
import Chart from 'chart.js';
To get up and running with a quick example, have a look at the example code in the Chart.js documentation or see my example below.
dashboard.component.ts
import Chart from 'chart.js';
import { ViewChild, Component, ElementRef, OnInit } from '@angular/core';
@Component({
selector: 'app-dashboard',
template: '<canvas #donut></canvas>'
})
export class DashboardComponent implements OnInit {
@ViewChild('donut') donut: ElementRef;
constructor(
) { }
ngOnInit() {
let donutCtx = this.donut.nativeElement.getContext('2d');
var data = {
labels: [
"Value A",
"Value B"
],
datasets: [
{
"data": [101342, 55342], // Example data
"backgroundColor": [
"#1fc8f8",
"#76a346"
]
}]
};
var chart = new Chart(
donutCtx,
{
"type": 'doughnut',
"data": data,
"options": {
"cutoutPercentage": 50,
"animation": {
"animateScale": true,
"animateRotate": false
}
}
}
);
}
}
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…