как инициализировать диаграмму с данными API-выборки? - PullRequest
Новая
       31

как инициализировать диаграмму с данными API-выборки?

0 голосов
/ 09 февраля 2019

Я хочу использовать ngx-charts для моего проекта.Проблема в том, что я не понимаю, как инициализировать мой график данными, полученными с моего API.

Вертикальная гистограмма кажется простой.Данные имеют следующий тип:

https://stackblitz.com/edit/vertical-bar-chart?embed=1&file=app/app.component.ts

Когда я присваиваю в constructor Object.assign(this, data) (data я получил от моего API)) я получаю следующееошибка:

ОШИБКА TypeError: Невозможно прочитать свойство 'toLocaleString' из неопределенного

Их данные имеют следующий тип: 

export var single = [{
    "name": "Germany",
    "value": 8940000
  },
  {
    "name": "USA",
    "value": 5000000
  },
  {
    "name": "France",
    "value": 7200000
  }
];

Мои данные: 

[{
    "data": "2019-01-09",
    "totalConsum24": 66.66666666666667
  },
  {
    "data": "2019-02-03",
    "totalConsum24": 160
  },
  {
    "data": "2019-02-04",
    "totalConsum24": 153.84615384615384
  },
  {
    "data": "2019-02-05",
    "totalConsum24": 90.9090909090909
  }
]

Edit1: Так я получаю свои данные из моего бэкэнда.данные такие же, как я опубликовал выше.В COnstructor я начинаю с Object.assign (this, {single}) и первоначально одиночного: any []; 

ngOnInit() {
this.shipService.getConsumuriSiDataForShipById(this.shipId).subscribe(data 
=> {
  console.log(data);
  this.single = data;
});

1 Ответ

0 голосов
/ 09 февраля 2019

И в вашем Компоненте вам нужно будет map данные в формате, понятном ngx-диаграммам.Вот, попробуйте: 

...
import { ShipService } from './path-to-ship-service';

@Component({...})
export class AppComponent {

  ...,
  single = [];

  constructor(private shipService: ShipService) {}

  ngOnInit() {
    this.shipService.getConsumuriSiDataForShipById(this.shipId)
      .subscribe(data => {
        console.log(data);
        this.single = data.map(datum => ({ name: datum.data, value: datum.totalConsum24 }));
    });
  }

  ...
}

Вот вам Рабочий образец StackBlitz для вашей ссылки.

...