Angular2 Google餅圖可視化

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);
}

}

然后我在app組件中使用它。 在此之前沒有任何問題，它適用於IE 10,11和Edge以及Chrome。 但Firefox有問題。 它可以非常小地顯示圖表視圖。

這是chrome和IE視圖

和

這是firefox視圖

Answer 1

我建議使用ng2-google-charts模塊中的現有GoogleChartComponent類，而不是創建自己的指令。 您可以在此處查看示例： https ： //stackoverflow.com/a/47728736/372939