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 有问题。它可以非常小地显示图表视图。

This is chrome and IE view

和

This is firefox view

Answer 1

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

Angular2 Google饼图可视化

1 个答案: