Pi-Chartを複数回レンダリングしますか？

Question

私はAngularプロジェクトを作成しており、pi-chartsを実装したいと考えています。私はたくさんの検索をしましたが、私に役立つものは何も見つかりませんでした。 私はこのチャートをangular2-google-chartから実装しました。私のHTMLでは、複数のグラフ（10以上）を表示したいと考えています。私は、HTMLを書いて、複数回にわたりピ - チャートを表示する。しかし、それは一度だけ見せている。 誰も私にこれがなぜ起こっているのか教えてもらえますか？

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>