为什么我的Angular 4 ChartJS组件不能渲染?
发布时间:2020-12-17 17:44:37 所属栏目:安全 来源:网络整理
导读:我试图弄清楚为什么角度4 ChartJS组件没有渲染. 我已经使用纱线安装了包,它存在并正确导入.我可以在chrome控制台中看到Chart对象,但canvas元素仍然是空白的. import {Component,ElementRef,OnInit,ViewChild} from '@angular/core';import Chart from 'chart
我试图弄清楚为什么角度4 ChartJS组件没有渲染.
我已经使用纱线安装了包,它存在并正确导入.我可以在chrome控制台中看到Chart对象,但canvas元素仍然是空白的. import {Component,ElementRef,OnInit,ViewChild} from '@angular/core'; import Chart from 'chart.js'; @Component({ selector: 'app-root',template: '<canvas #aChart></canvas>',styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { @ViewChild('aChart') htmlChart: ElementRef; public data = { labels: [ 'Value A','Value B' ],datasets: [ { 'data': [101342,55342],// Example data 'backgroundColor': [ '#1fc8f8','#76a346' ] }] }; constructor(public myElement: ElementRef) {} ngOnInit() { const ctx: CanvasRenderingContext2D = this.htmlChart.nativeElement.getContext('2d'); const newChart: Chart = new Chart(ctx,{ 'type': 'doughnut','data': this.data,'options': { 'cutoutPercentage': 50,'animation': { 'animateScale': true,'animateRotate': false } } }); console.log('chart',newChart); } } 解决方法
你需要在div中包含canvas元素
template: '<div><canvas #aChart></canvas></div>', (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |