[Пожалуйста, дайте мне знать, как я могу улучшить этот вопрос для вашего лучшего понимания, если я не совсем ясно описываю ситуацию и то, что я хочу]
Я меняю диаграмму в своем приложении angular, которое мы создали ранее. Мы используем ng2-charts. Ранее мы использовали ДВА JSON/массива. Но служба REST (которую я не могу изменить, поскольку она исходит от сторонней службы) теперь изменена. Новый сервис REST выглядит следующим образом. Я пробовал с одним JSON. Я могу видеть график, когда мой ввод представляет собой жестко закодированный json в самом файле .ts.
Но я борюсь, когда пытаюсь получить JSON из вызова REST (GET).
К вашему сведению: я вижу JSON, когда печатаю его в консоли. Пожалуйста, посмотрите на картинку
Я получаю сообщение об ошибке:
Cannot read property 'data' of undefined
Ниже приведены два примера stackblitz. Первый - с жестко закодированным JSON, а второй - с вызовом REST:
https://stackblitz.com/edit/ng2-charts-line-template-iq1mia
https://stackblitz.com/edit/ng2-charts-line-template-voazjk
public summaryboardJson: Summaryboard[];
public lineChartLegend = true;
public lineChartType = 'line';
public lineChartPlugins = [];
public lineChartOptions: (ChartOptions & { annotation: any }) = {
responsive: true,
};
public lineChartColors: Color[] = [
{
borderColor: 'black',
backgroundColor: 'rgba(255,0,0,0.3)',
},
];
public lineChartData: ChartDataSets[];
public lineChartLabels: Label[];
ngOnInit() {
this.http
.get("https://api.jsonbin.io/b/5c90f7d86892a7259f084846")
.toPromise()
.then(response => {
const data = response.json();
this.summaryboardJson = data;
console.info(this.summaryboardJson);
//START: put data in Bar Chart
this.lineChartData = [
{ data: this.summaryboardJson.map(a => a.noOfDefects), label: 'Defects' },
];
this.lineChartLabels = this.summaryboardJson.map(a => a.Month);
//END: put data in Bar Chart
})
.catch(error => {
console.info(error);
return Observable.of<Summaryboard[]>([]);
});
Любая помощь в этом, как использовать вызов JSON из REST для создания той же диаграммы?





Попробуй это:
https://stackblitz.com/edit/ng2-charts-line-template-umuhe1?file=src%2Fapp%2Fapp.component.ts
Я обновил ваш второй stackblitz
Я инициализировал массив lineChartLabels новым массивом и выполнил ngIf для длины.