多次渲染Pi-Chart？

Question

我正在创建一个Angular项目并希望实施pi-charts。我搜查了很多，但没有发现任何有用的东西。 我已经从angular2-google-chart执行此图表。在我的HTML中，我想显示多个图表（超过10个）。我编写HTML以多次显示pi-charts。但它只显示一次。 任何人都可以告诉我为什么发生这种情况？

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>