angular-google-charts: неожиданное значение NaN-разбор атрибута x

Question

У меня есть служба Angular 6, передающая данные для заполнения диаграммы материалов Google.

app.component.ts

  export class CustomersComponent implements OnInit {

  customers: Customer[];

  charts: Array<{
    title: string,
    type: string,
    data: Array<Array<string | number | {}>>,
    roles: Array<{ type: string, role: string, index?: number }>,
    columnNames?: Array<string>,
    options?: {}
   }> = [];

  @ViewChild('chart')
  chart: GoogleChartComponent;

  constructor(private customerService: CustomerService) {}

ngOnInit(): void {
 this.getCustomers();
 this.customerService.getCustomers()
 .subscribe(res => {
  //  console.log(res)
   let firstname = res.map(res => res.firstname);
   console.log(firstname)
   let age = res.map(res => res.age);
   console.log(age)

   this.charts.push({
    title: 'Customer Demographics',
    type: 'Bar',
    columnNames: ['Customer', 'Age'],
    roles: [],
    data: [
      [firstname, age],
    ],
    options: {
      chart: {
        title: 'Customer Demographics',
        subtitle: 'Sales, Expenses, and Profit: 2014-2017'
      },
      bars: 'vertical' // Required for Material Bar Charts.
    }
  });
 })}

Затем, когда я пытаюсь передать данные в диаграммы Google, ничего не происходитзаполняется, и я получаю неожиданное значение Ошибка атрибута анализа NaN.

Любая помощь будет принята с благодарностью.Спасибо

Answer 1

данные отображаются в неправильном формате.

вместо двух массивов с отдельными значениями столбцов ...

[ "Joe", "Peter", "Lauren"...
[ 36, 18, 31...

каждая строка в данных должна быть массивом с каждым значением столбца ...

[ "Joe", 36 ],
[ "Peter", 18 ],
[ "Lauren", 31 ],

вы должны быть в состоянии исправить, комбинируя значения в ваших map заявлениях.

заменить ...

let firstname = res.map(res => res.firstname);
let age = res.map(res => res.age);

на ...

let data = res.map(res => [res.firstname, res.age]);

и добавить данные в объект диаграмм ...

this.charts.push({
  title: 'Customer Demographics',
  type: 'Bar',
  columnNames: ['Customer', 'Age'],
  roles: [],
  data: data,  // <-- add data here
  options: {
    chart: {
      title: 'Customer Demographics',
      subtitle: 'Sales, Expenses, and Profit: 2014-2017'
    },
    bars: 'vertical' // Required for Material Bar Charts.
  }