加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

为什么我的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>',

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读