Question

单击时不显示图形。我有

我有两个子组件

用于显示员工列表的数据组件
用于显示员工各自等级的等级组件

我在Rating组件的'ngOnInit'函数中放置了'graph code'，并在Data组件中单击了按钮，在事件发射的帮助下，我试图将布尔值从Data传递给Rating。如下面在rating.component.html中看到的，如果标志值变为true，则显示图表。但是即使标志变为true，图形也不可见。

数据组件

import { DataService } from './../../services/data.service';
import { Component, OnInit, Output, EventEmitter} from '@angular/core';



@Component({
  selector: 'app-data',
  templateUrl: './data.component.html',
  styleUrls: ['./data.component.css'],
})
export class DataComponent implements OnInit {
  users: { name: string; city: string }[] = [];
  visible = false;
  @Output() show  = new EventEmitter();
  constructor(private dataSerivce: DataService) {}

  ngOnInit(): void {
   this.users = this.dataSerivce.getEmployees();
  }
  toggle() {
    this.visible = !this.visible;
    if (this.visible) {
      console.log('enter');
      this.show.emit(this.visible);
    } else {
      this.show.emit(null);
    }
  }

}

评分组件


import { Rating } from './../../../../models/rating.model';
import { DataService } from 'src/app/services/data.service';
import { Component, OnInit, Input, OnChanges, SimpleChanges} from '@angular/core';
import {Chart} from '../../../../node_modules/chart.js';

@Component({
  selector: 'app-rating',
  templateUrl: './rating.component.html',
  styleUrls: ['./rating.component.css']
})
export class RatingComponent implements OnInit ,OnChanges{

   rating: Rating[] = [];
   @Input() flag = false;


  constructor(private dataService: DataService) { }

  ngOnInit() {
    console.log('init');
    var myChart= new Chart('myChart', {
      type: 'bar',
      data: {
          labels: ['Technical', 'Communication', 'Experience', 'Leadership'],
          datasets: [{
              label: 'skill scores',
              data: [10,15, 16, 22],
              backgroundColor: [
                  'rgba(255, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)',
                  'rgba(75, 192, 192, 0.2)'

              ],
              borderColor: [
                  'rgba(255, 99, 132, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)'

              ],
              borderWidth: 1
          }]
      },
      options: {
          scales: {
              yAxes: [{
                  ticks: {
                      beginAtZero: true
                  }
              }]
          }
      }
  });
  }

  ngOnChanges(changes: SimpleChanges){
       console.log('first time');

  }

  private getRatings($event){

       this.dataService.getRating().subscribe(res =>{
           this.rating.push(res);
       });
  }



}

评级html代码

<div style="height:40%;width:40%;" class="center" *ngIf ="flag" >
  <canvas
  class="chart chart-bar"
  chart-data="dataChart" id  = "myChart"></canvas>
</div>

Answer 1

尽管chart.js选项可能是正确的，但是RatingComponent中的当前代码并未将chart.js选项引用到任何特定的DOM Element。这可能是图表未呈现的原因之一。

ChartJS期望在DOM元素中使用reference来呈现图表。

例如：

HTML模板：

<div #barchart class="barChart"><d/iv>

RatingsComponent：

import { Component, OnInit, ViewChild } from '@angular/core';
import { Chart } from 'chart.js';

  @Component({
    ...
  })

  export class RatingComponent implements OnInit {

    @ViewChild('barchart') private chartRef;
    chart: any;


    ngOnInit() {

        // provide reference of the html component to the the Chart Instance.
        this.chart = new Chart(this.chartRef.nativeElement, {
        // insert chart options here
        });
    
    }

}

或者

查看更新后，我认为引起问题的部分是您没有将所需的数据传递给canvas组件。

根据ChartJS的文档。

HTML代码：

<div>
  <div style="display: block">
    <canvas baseChart
            [datasets]="barChartData"
            [labels]="barChartLabels"
            [options]="barChartOptions"
            [legend]="barChartLegend"
            [chartType]="barChartType">
    </canvas>
  </div>
</div>

组件

import { Component, OnInit } from '@angular/core';@Component({
  selector: 'app-my-bar-chart',
  templateUrl: './my-bar-chart.component.html',
  styleUrls: ['./my-bar-chart.component.css']
})

export class MyBarChartComponent implements OnInit {  constructor() { }        

    public barChartOptions = {
        scaleShowVerticalLines: false,
        responsive: true
    };  
    public barChartLabels = ['2006', '2007', '2008', '2009', '2010', '2011',    '2012'];
    public barChartType = 'bar';
    public barChartLegend = true;  public barChartData = [
      {data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
      {data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'}
    ];  

  ngOnInit() {
  }}

单击按钮后无法显示图形

1 个答案: