gpt4 book ai didi

angular - 为什么我的 Angular 4 ChartJS 组件不呈现?

转载 作者:太空狗 更新时间:2023-10-29 17:24:14 25 4
gpt4 key购买 nike

我想弄清楚为什么 angular 4 ChartJS 组件没有呈现。

我已经使用 yarn 安装了包,它存在并正确导入。我可以在 chrome 控制台中看到图表对象,但 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);
}
}

最佳答案

您需要将 canvas 元素包含在 div

template: '<div><canvas #aChart></canvas></div>',

关于angular - 为什么我的 Angular 4 ChartJS 组件不呈现?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45395490/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com