Как использовать ChartJS в AngularJS

Визуализация данных является важной частью веб-разработки и взаимодействия с социальными сетями. Если вы работаете над Angular и разрабатываете серверную часть своего следующего приложения, вам нужно будет визуализировать свои данные и настроить их таким образом, чтобы упростить вывод и понимание.

Если у вас есть веб-сайт с интенсивным использованием данных, вам будет трудно найти способ понять данные. Методы визуализации данных могут помочь сгруппировать ваши данные в одном месте и отобразить их таким образом, чтобы их было легко понять всем, особенно в виде диаграмм.

AngularJS обеспечивает интеграцию с chart js, который является популярным средством для использования инструментов визуализации ваших данных. Технический текст, наполненный жаргоном, может быть трудным для понимания всеми членами вашей команды, в то время как базовые диаграммы не так уж и сложны. Диаграммы могут сделать ваш веб-сайт и его данные намного проще в использовании и упростить процесс разработки.

В этой статье мы рассмотрим, как использовать ChartJS в AngularJS. Это упрощенное руководство поможет вам в ваших мерах по сбору данных и даст вам средства для доступа к сложным данным с помощью простых инструментов. Оставайтесь с нами, чтобы узнать больше:

Что такое Chart js?

Chart js — это уникальный инструмент на JavaScript, который упрощает данные и представляет их в адаптивной манере. Инструмент популярен среди пользователей из-за того, как он использует гистограммы, линейные графики, круговые диаграммы, точечные диаграммы и кольцевые диаграммы для лучших методов визуализации. Разработчики могут получить доступ к данным и визуализировать их в несколько кликов, тогда как Chart JS сделает всю тяжелую работу за вас.

Chart js чрезвычайно настраиваем по своей природе и требует определенного обучения. Однако мы упрощаем процесс, упомянув, как использовать график JS в AngularJS.

Как использовать Chart JS в AngularJS

Теперь мы рассмотрим, что вы можете сделать, чтобы реализовать Chart JS в AngularJS.

Реализация всех данных диаграммы

Вам нужно начать с получения данных для диаграммы и использовать их статическим образом. График должен быть зарегистрирован у подрядчика. Код, которому нужно следовать:

import { Component } from '@angular/core';
import { Chart, registerables } from 'chart.js';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'angular-chart';
  constructor() {
    Chart.register(...registerables);
  }
  ngOnInit(): void {
    // Line Chart
    const lineCanvasEle: any = document.getElementById('line_chart')
    const lineChar = new Chart(lineCanvasEle.getContext('2d'), {
      type: 'line',
        data: {
          labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
          datasets: [
            { data: [12, 15, 18, 14, 11, 19, 12], label: 'Orders', borderColor: 'rgba(54, 162, 235)' },
            { data: [65, 59, 80, 81, 56, 55, 40], label: 'Sales', borderColor: 'rgb(75, 192, 192)' },
          ],
        },
        options: {
          responsive: true,
          scales: {
              y: {
                  beginAtZero: true
              }
          }
        }
      });
    // Bar chart
    const barCanvasEle: any = document.getElementById('bar_chart')
    const barChart = new Chart(barCanvasEle.getContext('2d'), {
      type: 'bar',
        data: {
          labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
          datasets: [{
            label: 'Sales',
            data: [65, 59, 80, 81, 56, 55, 40],
            backgroundColor: [
              'rgba(255, 99, 132, 0.2)',
              'rgba(255, 159, 64, 0.2)',
              'rgba(255, 205, 86, 0.2)',
              'rgba(75, 192, 192, 0.2)',
              'rgba(54, 162, 235, 0.2)',
              'rgba(153, 102, 255, 0.2)',
              'rgba(201, 203, 207, 0.2)'
            ],
            borderColor: [
              'rgb(255, 99, 132)',
              'rgb(255, 159, 64)',
              'rgb(255, 205, 86)',
              'rgb(75, 192, 192)',
              'rgb(54, 162, 235)',
              'rgb(153, 102, 255)',
              'rgb(201, 203, 207)'
            ],
            borderWidth: 1
          }]
        },
        options: {
          responsive: true,
          scales: {
              y: {
                  beginAtZero: true
              }
          }
        }
      });
  }
}

Реализация диаграммы в HTML

Следующим процессом в цепочке является реализация диаграммы в HTML. Следуйте приведенному ниже коду:

<div class="container py-5">
  <div class="row">
    <div class="col-4">
      <canvas id="line_chart" width="400px" height="400px"></canvas>
      <h3 class="text-center mt-3">Line Chart</h3>
    </div>
    <div class="col-4">
      <canvas id="bar_chart" width="400px" height="400px"></canvas>
      <h3 class="text-center mt-3">Bar Chart</h3>
    </div>
  </div>
</div>

Модуль импорта

Теперь вы можете импортировать модуль, добавив модуль диаграммы в файл app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ChartsModule } from 'ng2-charts';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ChartsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Маршрутизация всех компонентов диаграммы

Теперь вы можете завершить процесс, маршрутизировав весь компонент диаграммы:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { BarChartComponent } from './bar-chart/bar-chart.component';
import { BubbleChartComponent } from './bubble-chart/bubble-chart.component';
import { DoughnutChartComponent } from './doughnut-chart/doughnut-chart.component';
import { LineChartComponent } from './line-chart/line-chart.component';
import { PieChartComponent } from './pie-chart/pie-chart.component';
import { PolarChartComponent } from './polar-chart/polar-chart.component';
import { RadarChartComponent } from './radar-chart/radar-chart.component';
import { ScatterChartComponent } from './scatter-chart/scatter-chart.component';
const routes: Routes = [
  {
    path: 'line-chart',
    component: LineChartComponent
  },
  {
    path: 'pie-chart',
    component: PieChartComponent
  },
  {
    path: 'bar-chart',
    component: BarChartComponent
  },
  {
    path: 'doughnut-chart',
    component: DoughnutChartComponent
  },
  {
    path: 'polar-chart',
    component: PolarChartComponent
  },
  {
    path: 'radar-chart',
    component: RadarChartComponent
  },
  {
    path: 'bubble-chart',
    component: BubbleChartComponent
  },
  {
    path: 'scatter-chart',
    component: ScatterChartComponent
  },
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'line-chart'
  }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Chart JS может помочь значительно упростить визуализацию данных и использование диаграмм в AngularJS. Поскольку данные считаются топливом, которое питает вашу аналитику и ваш веб-сайт, крайне необходимо, чтобы вы настраивали и создавали модели визуализации, которые были бы понятны всем.

Коды и процессы, используемые в этом руководстве, помогут вам создать идеальную модель визуализации данных и использовать Chart JS в AngularJS.