Создание диаграммы с данными из API с помощью модуля HTTPClient в Angular

В приложениях Angular, работающих в режиме реального времени, мы часто взаимодействуем с каким-либо API или сервисом для получения данных. Эти данные могут быть либо статистическими, либо связанными с пользователем. Если вы создаете приложение для отображения статистики о стране, вы можете использовать сторонние API или сервисы для получения данных. Эти данные могут быть представлены в табличной форме или в виде графиков. Графики, также называемые диаграммами, — это графическое представление данных для облегчения их понимания и анализа. Например, если вы наблюдаете в режиме реального времени за погодой в разных городах на графике, вы можете предупредить людей о любых неблагоприятных погодных условиях и направить их в более безопасный регион как можно скорее. В этой статье я расскажу о том, как получить данные из API в Angular и отобразить их на графике, чтобы мы могли лучше понять и интерпретировать данные.

Модули и компоненты, используемые для приложения

Angular предоставляет модуль HTTPClient для работы с API и простые методы для работы с данными. Я буду использовать метод get модуля HTTPClient вместе с методом subscribe для получения данных из API. Для отображения данных в виде диаграммы я буду использовать компонент CanvasJS angular chart. CanvasJS предоставляет простой API для настройки внешнего вида графика, а также различные другие возможности, такие как масштабирование/панорамирование, экспорт графика в формат изображения, динамическое обновление данных и т.д.

Примечание: API, используемый в этой статье, взят с сайта datausa.io, который предоставляет информацию о населении Соединенных Штатов Америки за период 2013-2019 гг.

Предварительные условия

• Базовое приложение Angular
• Компонент CanvasJS Angular Chart Component

Пошаговая инструкция

1. Зарегистрируйте модули HTTPClient & компонент графика в app.module.ts

import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import * as CanvasJSAngularChart from './assets/canvasjs.angular.component';
var CanvasJSChart = CanvasJSAngularChart.CanvasJSChart;

@NgModule({
    imports: [BrowserModule, HttpClientModule],
    declarations: [AppComponent, CanvasJSChart],
    bootstrap: [AppComponent],
})
export class AppModule {}

2. После регистрации модулей импортируйте HttpClient в app.component.ts & создайте опции для графика.

/*app.component.ts*/
import { HttpClient } from '@angular/common/http';
.
export class AppComponent {
    chart: any;
    constructor(private http: HttpClient) {}

    chartOptions = {
    animationEnabled: true,
    theme: 'light2',
    title: {
        text: 'Chart with Data from API',
    },
    data: [
        {
        dataPoints: [],
        },
    ],
    };
    getChartInstance(chart: object) {
    this.chart = chart;
    }
}

3. Обновите html-файл шаблона (app.component.html), чтобы добавить график.

/*app.component.html*/
<canvasjs-chart [options]="chartOptions" (chartInstance)="getChartInstance($event)"[styles]="{ width: '100%', 
height: '360px' }"></canvasjs-chart>

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

export class AppComponent {
  dataPoints: any = [];
  .
  chartOptions = {
  .
  .
  dataPoints: this.dataPoints
  .
  .
  }
}

5. Получим данные из API с помощью метода get. Установите responseType в JSON, так как API возвращает данные в формате JSON.

this.http.get('https://datausa.io/api/data?drilldowns=Nation&measures=Population',{ responseType: 'json'}).subscribe((response: any) => {
});

6. Перед передачей данных, полученных из запроса API, нам необходимо разобрать их до формата, принимаемого CanvasJS {label: String, y: Число}

responseData.data.forEach((populationData: any) => {
    this.dataPoints.push({
      label: populationData.Year,
      y: populationData.Population,
    });
  });
this.chart.render();

Виола!!! Мы получили данные из API с помощью модуля HTTPClient и представили их на диаграмме.

Персонализации

Компонент угловых диаграмм CanvasJS поставляется с большим количеством опций настройки, чтобы сделать визуализацию лучше и соответствовать шаблону / теме / случаю использования нашего сайта. Например, API возвращает данные в обратной последовательности, т.е. с 2019 по 2013 год. В этом случае можно изменить направление оси x, чтобы ось отображалась с 2013 по 2019 год. Чтобы метки осей выглядели более удобными для чтения, можно добавить суффикс числа с помощью labelFormatter. Ниже приведен фрагмент кода, который не делает того же самого. Вы можете обратиться к этой странице для получения дополнительной информации о возможностях настройки, доступных в библиотеке.

axisX: {
    reversed: true
},
axisY: {
    title: 'Population Count (in Millions)',
    labelFormatter: function (e: any) {
        return e.value / 1000000 + 'M';
    }
}

Enahancements

Эта же концепция может быть усовершенствована для создания полной приборной панели с данными из JSON.