angular - 多次渲染 Pi-Chart？

Question

我正在创建一个 Angular 项目并想要实现 pi-charts。我进行了很多搜索，但没有发现任何对我有帮助的东西。我已经从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>