javascript - Angular2 Google 饼图可视化

Question

我正在尝试使用 Angular2 开发一个网络应用程序，它包含一个谷歌饼图。

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

@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有问题。它将图 TableView 可视化得非常小。

This is chrome and IE view

和

This is firefox view

Answer 1

我建议使用 ng2-google-charts 模块中现有的 GoogleChartComponent 类，而不是创建自己的指令。您可以在此处查看示例:https://stackoverflow.com/a/47728736/372939