angular - 如何在角度 7 中将数组数据插入到 ng2-google-chart 的图表中

Question

我使用角度开发环境 7 我正在尝试通过 API 和角度服务运行 ng2 谷歌图表的饼图。

附上我的TS文件的图片

问题：如何将来自我数组的值输入到图表的DataTable中？

谢谢

constructor(private _getIncomeService: getIncomeService) { }
    _GetAveragesModel: GetAveragesModel[];

    ngOnInit() {
        this.fnGetAverages();
    }
    fnGetAverages() {
        this._getIncomeService.GetAverages(279).subscribe(x => {
            this._GetAveragesModel = x;
        });
    }       
    public pieChart = {
        chartType: 'PieChart',
        dataTable: [
            ['Task', 'Hours per Day'],
            ['ss', 11],
            ['Eat', 2],
            ['Commute', 2],
            ['Watch TV', 2],
            ['Sleep', 7]
        ],
        options: {
            title: 'Tasks',
            slices: {
                0: { offset: 0.3 },
                1: { offset: 0.2 },
            },
            width: '100%', height: '100%',
            is3D: true,
            chartArea: {left: "3%",top: "3%",height: "94%",width: "94%"}
        }
    };
```[enter image description here][1]


  [1]: https://i.stack.imgur.com/1RMwk.png

标签： angularapigoogle-visualization

Answer 1

将 dataTable 属性映射到 _GetAveragesModel 并使用 pieChart 作为 getter。如果它改变饼图属性的值也会改变。

get pieChart():any {
    return {
      chartType: 'PieChart',
      dataTable: this.__GetAveragesModel.map(e => {
  if (e.hasOwnProperty('OrderTypeName') && e.hasOwnProperty('AveragePerDinner')) {
    return [e.OrderTypeName,e.AveragePerDinner]
  }
      }),
      options: {
            title: 'Tasks',
            slices: {
                0: { offset: 0.3 },
                1: { offset: 0.2 },
            },
            width: '100%', height: '100%',
            is3D: true,
            chartArea: {left: "3%",top: "3%",height: "94%",width: "94%"}
        }
    }
}