Как вставить данные массива в диаграмму ng2-google-chart в угловых 7 - PullRequest
Новая
       25

Как вставить данные массива в диаграмму ng2-google-chart в угловых 7

1 голос
/ 07 мая 2019

Я использую угловую среду разработки 7 И я пытаюсь запустить круговую диаграмму Google 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

Ответы [ 2 ]

1 голос
/ 13 мая 2019

Не используйте 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 the [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>
0 голосов
/ 07 мая 2019

Сопоставьте свойство dataTable с _GetAveragesModel и используйте pieChart в качестве получателя.Если он изменится, значение свойства круговой диаграммы также изменится. 

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