Загрузка нескольких пончиков с диаграммы. JS в одном компоненте angular 6 - PullRequest
Новая
       17

Загрузка нескольких пончиков с диаграммы. JS в одном компоненте angular 6

0 голосов
/ 07 января 2020

У меня есть компонент, в котором я должен показать 2 кольцевых диаграммы. а затем у меня есть другой компонент, который будет загружать диаграмму после получения набора данных из предыдущего компонента. после передачи разных данных и разных идентификаторов ни одна из диаграмм не загружается.

Вот мой код: - родительский компонент HTML: - 

<div class="card chart radial-chart match-time col-sm-3">
        <label class="card-title">Match Time</label>
        <app-chart-component [data]='matchingChartData' [id]=1></app-chart-component>
    </div>
    <div class="card chart radial-chart passage-time col-sm-3">
        <label class="card-title">Passage Time</label>
        <app-chart-component [data]='PassagerChartData' [id]=2></app-chart-component>
    </div>

родительский компонент ts: - 

matchingChartData = {
labels : ['Minimum','Maximum', 'Average'],
datasets: [
  { 
    data: [2.4,2.8, 5],
    backgroundColor: ['blue','red','green' ]
  },
]

}; 

 PassageChartData = {
labels : ['Minimum','Maximum', 'Average'],
datasets: [
  { 
    data: [2.4,2.8, 2.6],
    backgroundColor: ['green','red','yellow' ]
  },
]

}

компонент диаграммы HTML: - 

<canvas id={{uniqueId}}></canvas>

Компонент диаграммы ts: - 

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

@Component({
  selector: 'app-chart-component',
    templateUrl: './chart-component.component.html',
    styleUrls: ['./chart-component.component.css']
  })
  export class ChartComponentComponent implements OnInit {
    chart: any;
    uniqueId: any;
    @Input() data: any;
    @Input() id:number;
    constructor() { }

    ngOnInit() {
      this.uniqueId = 'canvas'+this.id;;
      this.chart = new Chart('canvas', {
        type: 'doughnut',
        data: {
          labels: this.data.labels,
          datasets: this.data.datasets
        },
        options: {
          cutoutPercentage: 85,
          rotation: 1 * Math.PI,
          circumference: 1 * Math.PI,
          legend: {
            display: false,
          },
          tooltips:{
            enabled:true,
            titleFontSize: 26,
            bodyFontSize: 26
          }
              }
      });
    }

  }

Ответы [ 2 ]

0 голосов
/ 07 января 2020

Компонент диаграммы ts: 

import { Component, OnInit, Input,ViewChild,AfterViewInit } from '@angular/core';
import { Chart } from 'chart.js';
@Component({
  selector: 'app-chart-component',
    templateUrl: './chart-component.component.html',
    styleUrls: ['./chart-component.component.css']
  })
  export class ChartComponentComponent implements OnInit, AfterViewInit {
    chart: any;
    uniqueId: any;
    @Input() data: any;
    @Input() id:number;
    @ViewChild('canvas', { static: false }) canvas: ElementRef;
    public context: CanvasRenderingContext2D;
    constructor() { }

    ngOnInit() {}

    ngAfterViewInit() {
      this.context = (<HTMLCanvasElement>this.canvas.nativeElement).getContext('2d');
      this.uniqueId = 'canvas'+this.id;
      this.chart = new Chart(this.context, {
        type: 'doughnut',
        data: {
          labels: this.data.labels,
          datasets: this.data.datasets
        },
        options: {
          cutoutPercentage: 85,
          rotation: 1 * Math.PI,
          circumference: 1 * Math.PI,
          legend: {
            display: false,
          },
          tooltips:{
            enabled:true,
            titleFontSize: 26,
            bodyFontSize: 26
          }
              }
      });
    }

  }

Компонент диаграммы HTML: 

<canvas #canvas [id]="uniqueId"></canvas>
0 голосов
/ 07 января 2020

компонент диаграммы HTML: - 

<canvas id="{{uniqueId}}"></canvas>

или 

<canvas [id]="uniqueId"></canvas>
...