Question

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

附上我TS文件的图片

问题：如何将数组中的值输入图表的数据表中？

谢谢


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

Answer 1

请勿使用ng2-google-chart，而应使用 angular-google-charts （npm i angular-google-charts）。

这是HTML代码您有一个类似[data]和Value“ dataichange” =>这样的标签，可以在ts文件中更改名称

<google-chart #chart
   [title]="title"
   [type]="type"
   [data]="dataichange"
   [columnNames]="columnNames"
   [options]="options"
   [width]="width"
   [height]="height">
</google-chart>

这是.ts文件，其数据经过硬编码

title = 'Browser market shares at a specific website, 2014';
   type = 'PieChart';
   dataichange = [
      ['Firefox', 45.0],
      ['IE', 26.8],
      ['Chrome', 12.8],
      ['Safari', 8.5],
      ['Opera', 6.2],
      ['Others', 0.7] 
   ];
   columnNames = ['Browser', 'Percentage'];
   options = {    
   };
   width = 550;
   height = 400;

要解决您的问题，请使用您自己的“新阵列”替换数据。

您需要一个新的阵列，因为来自服务的阵列太大。

因此，您需要为特定图表所需的列创建一个新数组。

为此，我使用“ map”获取数组列，并使用“ push”以我设置的顺序在新数组中创建它们。

Datachart: any[];
	fnGetAverages() {
		this._getIncomeService.GetAverages(279).subscribe(Res => {
			this._GetAveragesModel = Res;
			Res.map(item => {
				this.Datachart.push([item.OrderTypeName, item.AveragePerDiner]);
			})
		});
	}

，现在以HTML替换[data] =“ Datachart” DataChart是您过滤后的新数组

<google-chart #chart
   [title]="title"
   [type]="type"
   [data]="Datachart" // Here I changed to the new array name "Datachart"
   [columnNames]="columnNames"
   [options]="options"
   [width]="width"
   [height]="height">
</google-chart>

Answer 2

将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%"}
        }
    }
}

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

2 个答案: