Angular2谷歌饼图可视化

Question

我想用Angular2开发一个web应用程序，它包含一个谷歌饼图。

我为饼图创建了一个指令，这里是代码。

@Directive({ 
selector: 'pie-chart' 
}) 

export class PieChartDirective { 
    el: HTMLElement; 
    w: any; 

private _content: any = {}; 

@Input() 
set content(c: any) { 
    this._content = c; 

    this.draw(); 
} 
get content() { return this._content; } 

constructor(elementRef: ElementRef) { 
    this.w = window; 

    this.el = elementRef.nativeElement; 

    if (!this.w.google) { console.error("Google chart yuklenmedi.."); }; 
} 

draw() { 

    var data = this.w.google.visualization.arrayToDataTable([ 
     ['Label', 'Value'], 
     ['Hedef ve Üstü', this._content.hedeF_UST], 
     ['Hedef Altı', this._content.hedeF_ALT] 
    ]); 

    let options = { 
     "backgroundColor": '#f1f8e9', 
     width: '100px', 
     title: this._content.name, 
     colors: ['#088A4B', 'red'], 
     chartArea: { 
      left: "5%", 
      top: "20%", 
      height: "75%", 
      width: "90%" 
     }    
    }; 


    (new this.w.google.visualization.PieChart(this.el)) 
     .draw(data, options); 
} 

}

然后我用它在应用程序组件。在这之前没有问题，它适用于IE 10,11和Edge以及Chrome。但是Firefox有问题。它可视化图表视图非常小。

This is chrome and IE view

和

This is firefox view

Answer 1

而不是创建自己的指令，我会建议使用从NG2，谷歌，图表模块现有GoogleChartComponent类。您可以在此处看到示例：https://stackoverflow.com/a/47728736/372939