Я пытаюсь использовать Chart.js с Angular 4, я видел пример в документах chart.js, но он использовал <script> , чтобы вытащить script, чтобы он не работал на компоненте. Вот как я пытался вписаться в Angular:
TS
export class GraphicsComponent implements OnInit {
ctx = document.getElementById("myChart");
myChart = new Chart(this.ctx, {
type: 'pie',
data: {
labels: ["New", "In Progress", "On Hold"],
datasets: [{
label: '# of Votes',
data: [1,2,3],
backgroundColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)'
],
borderWidth: 1
}]
},
options: {
responsive: false,
display:true
}
});
constructor() { }
ngOnInit() {
}
}
HTML
<canvas id="myChart" width="700" height="400"></canvas>
Любая идея, как я буду работать?
EDIT: Я обновил свой код с помощью импорта, и теперь я получаю сообщение об ошибке.
Код импорта:
import * as Chart from 'chart.js'
Ошибка на консоли хром:
ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'length' of null
TypeError: Cannot read property 'length' of null
at Object.acquireContext (platform.dom.js:333)
at Chart.construct (core.controller.js:74)
at new Chart (core.js:42)
at new GraphicsComponent (graphics.component.ts:12)
at createClass (core.es5.js:10922)
at createDirectiveInstance (core.es5.js:10756)
at createViewNodes (core.es5.js:12197)
at createRootView (core.es5.js:12092)
at callWithDebugContext (core.es5.js:13475)
at Object.debugCreateRootView [as createRootView] (core.es5.js:12792)
at Object.acquireContext (platform.dom.js:333)
at Chart.construct (core.controller.js:74)
at new Chart (core.js:42)
at new GraphicsComponent (graphics.component.ts:12)
at createClass (core.es5.js:10922)
at createDirectiveInstance (core.es5.js:10756)
at createViewNodes (core.es5.js:12197)
at createRootView (core.es5.js:12092)
at callWithDebugContext (core.es5.js:13475)
at Object.debugCreateRootView [as createRootView] (core.es5.js:12792)
at resolvePromise (zone.js:795)
at resolvePromise (zone.js:766)
at zone.js:844
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:425)
at Object.onInvokeTask (core.es5.js:3881)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:192)
at drainMicroTaskQueue (zone.js:602)
at <anonymous>