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