如何在AngularJS中使用ChartJS

方石剑
479 阅读4分钟

数据可视化是网络开发和社会引擎参与的一个重要部分。如果你正在使用Angular并开发下一个应用程序的后端，那么你就需要将数据可视化，并将其设置为一种使推理和理解更容易的方式。

如果你有一个数据密集型的网站，你会发现很难想出一个方法来理解数据。数据可视化方法可以帮助将你的数据集中在一个地方，并以一种所有人都容易理解的方式显示出来，特别是以图表的形式。

AngularJS提供了与图表js的集成，这是一个流行的媒介，可以在你的数据上使用可视化工具。充满专业术语的技术文本对你的所有团队成员来说可能很难理解，而基本的图表却不是那么困难。图表可以使你的网站和它的数据更容易使用，并可以简化开发过程。

在这篇文章中，我们看一下如何在AngularJS中使用ChartJS。这个简化的指南将有助于你的数据收集措施，并给你提供用简单工具访问复杂数据的手段。请跟我们一起了解更多。

究竟什么是Chart js？

Chart js是JavaScript上的一个独特的工具，它简化了数据，并以一种响应式的方式呈现。该工具受到用户的欢迎，因为它利用条形图、线图、饼图、散点图和甜甜圈图来实现最佳的可视化方法。开发人员可以通过点击访问数据并将其可视化，而Chart JS则为你完成了主要的重任。

Chart js在本质上是极其可定制的，并且有一定的学习曲线。然而，我们通过提及如何在AngularJS中使用图表JS，使这个过程更加简单。

如何在AngularJS中使用图表JS

我们现在来看看在AngularJS中实现Chart JS可以做些什么。

实现所有的图表数据

你需要先为你的图表获取数据，并以静态的方式使用它。该图表应该在承包商处注册。这里要遵循的代码是。

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文件中添加Chart Module来导入模块。

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上的数据可视化和图表使用变得更加容易。由于数据被认为是为你的分析和网站提供动力的燃料，你非常有必要定制和制作易于所有人理解的可视化模型。

本指南中使用的代码和流程将帮助你创建完美的数据可视化模型，并在AngularJS中使用Chart JS。

avatar
文章
阅读
粉丝