Использование данных JSON в ng2-диаграммах

[Пожалуйста, дайте мне знать, как я могу улучшить этот вопрос для вашего лучшего понимания, если я не совсем ясно описываю ситуацию и то, что я хочу]

Я меняю диаграмму в своем приложении 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 для создания той же диаграммы?

Использование данных JSON в ng2-диаграммах

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
0
1 836
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Попробуй это:

https://stackblitz.com/edit/ng2-charts-line-template-umuhe1?file=src%2Fapp%2Fapp.component.ts

Я обновил ваш второй stackblitz

Я инициализировал массив lineChartLabels новым массивом и выполнил ngIf для длины.

Другие вопросы по теме