Angular 多次渲染Pi图表？

我正在创建一个角度项目，并希望实现pi图表。我搜索了很多，但没有找到任何对我有用的东西。 我已经从

angular2谷歌图表

实现了这个图表。在我的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
               };
        }

<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>

profile.component.html:

    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
               };
        }

<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>

Profile

请参阅我为上述代码获得的快照：

使用以下代码：

    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> 

gstatic.com/charts/loader.js“>var googleLoaded=false；我在index.html中也使用了这段代码