Angular2 Google円グラフの視覚化

Question

Angular2を使用したWebアプリケーションを開発しようとしており、Googleの円グラフが含まれています。

私は円グラフのディレクティブを作成しました。ここではコードです。

@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