Render Pi-Chart несколько раз?

Question

Я создаю проект Angular и хочу реализовать pi-диаграммы. Я много искал, но не нашел ничего полезного для меня. Я реализовал эти диаграммы от angular2-google-chart. В моем HTML я хочу показать несколько диаграмм (более 10). Я пишу HTML, чтобы показать pi-диаграммы несколько раз. Но он показывает только один раз. Может ли кто-нибудь предложить мне, почему это происходит?

profile.component.ts:

import { Component, OnInit,Input }   from '@angular/core'; 
    import { Router,ActivatedRoute }     from '@angular/router'; 
    import { GoogleChart}        from'../../../../directives/angular2-google-chart.directive'; 

    @Component({ 
     selector: 'profile-component2', 
     directives: [GoogleChart], 
     templateUrl:`../app/modules/dashboard/dashComponents/profileComponents/profile.component.html`, 
    }) 

    export class ProfileComponent2 { 
     public pie_ChartData = [ 
         ['Task', 'Hours per Day'], 
         ['Present',  20], 
         ['Earned Leaves',  7], 
         ['Unplanned Leaves', 3], 
     ]; 

    public pie_ChartData1 = [ 
         ['Task', 'Hours per Day'], 
         ['Present',  10], 
         ['Earned Leaves',  17], 
         ['Unplanned Leaves', 3], 
     ]; 

    public pie_ChartData2 = [ 
         ['Task', 'Hours per Day'], 
         ['Present',  10], 
         ['Earned Leaves',  17], 
         ['Unplanned Leaves', 3], 
     ]; 

    public pie_ChartOptions = { 
       title: 'Employee\'s Details', 
       width: 500, 
       height: 400 
       }; 
    public pie_ChartOptions1 = { 
       title: 'Employee\'s Details', 
       width: 500, 
       height: 400 
       }; 
    public pie_ChartOptions2 = { 
       title: 'Employee\'s Details', 
       width: 500, 
       height: 400 
       }; 
     } 

profile.component.html:

<h1>Profile</h1> 
<div id="pie_chart" 
    [chartData]="pie_ChartData" 
    [chartOptions] = "pie_ChartOptions" 
    chartType="PieChart" 
    GoogleChart> </div> 

<div id="pie_chart1" 
    [chartData]="pie_ChartData1" 
    [chartOptions] = "pie_ChartOptions2" 
    chartType="PieChart" 
    GoogleChart> </div> 

<div id="pie_chart2" 
    [chartData]="pie_ChartData2" 
    [chartOptions] = "pie_ChartOptions2" 
    chartType="PieChart" 
    GoogleChart> </div> 

Смотрите снимок, что я получил за приведенный выше код:

Answer 1

Используйте этот код:

import { Component, OnInit,Input }    from '@angular/core'; 
    import { Router,ActivatedRoute }     from '@angular/router'; 
    import { GoogleChart}        from'../../../../directives/angular2-google-chart.directive'; 

@Component({ 
selector: 'profile-component2', 
     templateUrl:`../app/modules/dashboard/dashComponents/profileComponents/profile.component.html`, 
    }) 

    export class ProfileComponent2 implements OnInit { 
    ngOnInit() { 
      console.log("profile component2 initialized"); 
     } 
      public pie_ChartData = [ 
        ['Task', 'Hours per Day'], 
        ['Present',  22], 
        ['Earned Leaves',  5], 
        ['Unplanned Leaves',3], 
    ]; 
      public pie_ChartData1 = [ 
        ['Task', 'Hours per Day'], 
        ['Present',  24], 
        ['Earned Leaves',  5], 
        ['Unplanned Leaves', 1], 
      ]; 
      public pie_ChartOptions = { 
      title: 'Vikas Patel', 
      width: 500, 
      height: 400 
      }; 
      public pie_ChartOptions1 = { 
      title: 'Shubham Verma', 
      width: 500, 
      height: 400 
      }; 
    } 

ваш HTML должен выглядеть так:

<div class="col-md-6" id="pie_chart" 
    [chartData]="pie_ChartData" 
    [chartOptions] = "pie_ChartOptions" 
    chartType="PieChart" 
    GoogleChart> </div> 

<div class="col-md-6" id="pie_chart1" 
    [chartData]="pie_ChartData1" 
    [chartOptions] = "pie_ChartOptions1" 
    chartType="PieChart" 
    GoogleChart> </div>