22.01.2020 в 23:24

Создание диаграмм в приложении Angular 7 с помощью Chart.js

В этой статье мы обсудим, как создавать линейные, столбчатые и кольцевые диаграммы с помощью Angular 7 и Chart.js для создания лучшей визуализации ваших данных.

Chart.js - это мощная библиотека визуализации данных с открытым исходным кодом. Она помогает визуализировать или представлять данные внутри веб-приложения с помощью JavaScipt. Это помогает построить данные на 8 различных типах диаграмм, таких как столбцы, линии, пироги и т.д. эти диаграммы Chart.js очень гибко настраиваются и используются при разработке веб-приложений для построения отзывчивого и красивого графика.

Шаг 1

Откройте SQL Server Management Studio, создайте таблицу Tblplayer и добавьте в эту таблицу некоторые демонстрационные данные.

CREATE TABLE [dbo].[Tblplayer](  
    [Id] [int] IDENTITY(1,1) NOT NULL,  
    [PlayerName] [varchar](50) NULL,  
    [Run] [varchar](50) NULL,  
PRIMARY KEY CLUSTERED   
(  
    [Id] ASC  
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]  
) ON [PRIMARY]  
GO  
SET ANSI_PADDING OFF  
GO  
SET IDENTITY_INSERT [dbo].[Tblplayer] ON   
GO  
INSERT [dbo].[Tblplayer] ([Id], [PlayerName], [Run]) VALUES (1, N'Rohit Sharma', N'59')  
GO  
INSERT [dbo].[Tblplayer] ([Id], [PlayerName], [Run]) VALUES (2, N'Sikar Dhwan', N'19')  
GO  
INSERT [dbo].[Tblplayer] ([Id], [PlayerName], [Run]) VALUES (3, N'Virat Kholi', N'79')  
GO  
INSERT [dbo].[Tblplayer] ([Id], [PlayerName], [Run]) VALUES (4, N'Rishabh Panth', N'99')  
GO  
INSERT [dbo].[Tblplayer] ([Id], [PlayerName], [Run]) VALUES (5, N'Ms Dhoni', N'119')  
GO  
INSERT [dbo].[Tblplayer] ([Id], [PlayerName], [Run]) VALUES (6, N'H Pandya', N'9')  
GO  
INSERT [dbo].[Tblplayer] ([Id], [PlayerName], [Run]) VALUES (7, N'B kumar', N'51')  
GO  
INSERT [dbo].[Tblplayer] ([Id], [PlayerName], [Run]) VALUES (8, N'K Yadav', N'11')  
GO  
INSERT [dbo].[Tblplayer] ([Id], [PlayerName], [Run]) VALUES (9, N'Chahal', N'4')  
GO  
INSERT [dbo].[Tblplayer] ([Id], [PlayerName], [Run]) VALUES (10, N'Bumrah', N'9')  
GO  
INSERT [dbo].[Tblplayer] ([Id], [PlayerName], [Run]) VALUES (11, N'Shami', N'5')  
GO  
SET IDENTITY_INSERT [dbo].[Tblplayer] OFF  
GO

Шаг 2

Откройте Visual Studio и создайте новый проект.

Перейдите в File > New > Project.

Выберите Web API в качестве шаблона и нажмите кнопку ОК.

Шаг 3

Щелкните правой кнопкой мыши папку «Models» в обозревателе и выберите Add >> New Item >> Data.

Выберите параметр ADO.NET Entity Data Model и нажмите Add.

Выберите EF designer из базы данных и нажмите кнопку Next.

Добавьте свойства соединения и выберите имя базы данных на следующей странице. Затем нажмите ОК.

Проверьте флажки таблицы. Внутренние параметры будут выбраны по умолчанию. Теперь нажмите кнопку Finish.

Наша модель данных создана.

Шаг 4

Щелкните правой кнопкой мыши папку Controllers и добавьте новый контроллер. Назовите это как Chartscontroller.

Добавьте следующее пространство имен в контроллер диаграмм.

using GraphDemo.Models

Добавьте новый метод для извлечения данных из базы данных.

[Route("GetCharts")]  
        [HttpGet]  
        public object GetChartsData()  
        {  
            ChartsDemoEntities DB = new ChartsDemoEntities();  
            return Json(DB.Tblplayers.ToList());  
        }

Заполните код Chartscontroller.

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Net;  
using System.Net.Http;  
using System.Web.Http;  
using GraphDemo.Models;  
namespace GraphDemo.Controllers  
{  
    [RoutePrefix("API/Charts")]  
    public class ChartsController : ApiController  
    {  
        [Route("GetCharts")]  
        [HttpGet]  
        public object GetChartsData()  
        {  
            ChartsDemoEntities DB = new ChartsDemoEntities();  
            return Json(DB.Tblplayers.ToList());  
        }  
    }  
}

Шаг 5

Теперь давайте включим Cors. Перейдите в Tools, откройте диспетчер пакетов NuGet, найдите Cors и установите пакет Microsoft.Asp.Net.WebApi.Cors.

Откройте Webapiconfig.cs и добавьте следующие строки.

Webapiconfig.cs

EnableCorsAttribute cors = new EnableCorsAttribute("*", "*", "*");    
config.EnableCors(cors);

Настраиваем приложение Angular

Шаг 1

Создайте проект Angular 7 с именем «chartjsdemo» с помощью следующей команды.

ng new chartjsdemo

Шаг 2

Откройте Visual Studio, откройте вновь созданный проект и добавьте Chart.js в этот проект с помощью следующей команды.

npm install chart.js --save

Шаг 3

Теперь создайте 5 компонентов. Чтобы создать компоненты, откройте терминал и используйте следующие команды.

ng g c linechart
ng g c barchart
ng g c doughnut
ng g c piechart
ng g c polararea

Шаг 4

Создайте класс с именем «Data» с помощью следующей команды.

ng g class Data

Добавьте следующие свойства в класс Data.

export class Data {  
    PlayerName :string;  
    Run:string;  
}

Шаг 5 - Линейная диаграмма

Откройте файл linechart.component.ts и добавьте необходимый модуль chart.js, класс и другие необходимые модули.

linechart.component.ts

import { Component, OnInit } from '@angular/core';  
import { Chart } from 'chart.js';  
import { HttpClient } from '@angular/common/http';  
import { Data } from '../../app/Data';  
@Component({  
  selector: 'app-linechart',  
  templateUrl: './linechart.component.html',  
  styleUrls: ['./linechart.component.css']  
})  
export class LinechartComponent implements OnInit {  
  url = 'http://localhost:58617/API/Charts/GetCharts';  
  data: Data[];  
  Player = [];  
  Run = [];  
  Linechart = [];  
  constructor(private httpClient: HttpClient) { }  
  ngOnInit() {  
    this.httpClient.get(this.url).subscribe((result: Data[]) => {  
      result.forEach(x => {  
        this.Player.push(x.PlayerName);  
        this.Run.push(x.Run);  
      });  
      this  
      this.Linechart = new Chart('canvas', {  
        type: 'line',  
        data: {  
          labels: this.Player,  
          datasets: [  
            {  
              data: this.Run,  
              borderColor: '#3cb371',  
              backgroundColor: "#0000FF",  
            }  
          ]  
        },  
        options: {  
          legend: {  
            display: false  
          },  
          scales: {  
            xAxes: [{  
              display: true  
            }],  
            yAxes: [{  
              display: true  
            }],  
          }  
        }  
      });  
    });  
  }  
}

Теперь откройте файл linechart.component.html и добавьте следующий HTML-код.

linechart.component.html

Шаг 6 - Гистограмма

Откройте файл barchart.component.ts и добавьте следующий код.

barchart.component.ts

import { Component, OnInit } from '@angular/core';  
import { Chart } from 'chart.js';  
import { HttpClient } from '@angular/common/http';  
import { Data } from '../../app/Data';  
@Component({  
  selector: 'app-barchart',  
  templateUrl: './barchart.component.html',  
  styleUrls: ['./barchart.component.css']  
})  
export class BarchartComponent implements OnInit {  
  data: Data[];  
  url = 'http://localhost:58617/API/Charts/GetCharts';  
  Player = [];  
  Run = [];  
  barchart = [];  
  constructor(private http: HttpClient) { }  
  ngOnInit() {  
    this.http.get(this.url).subscribe((result: Data[]) => {  
      result.forEach(x => {  
        this.Player.push(x.PlayerName);  
        this.Run.push(x.Run);  
      });  
      this  
      this.barchart = new Chart('canvas', {  
        type: 'bar',  
        data: {  
          labels: this.Player,  
          datasets: [  
            {  
              data: this.Run,  
              borderColor: '#3cba9f',  
              backgroundColor: [  
                "#3cb371",  
                "#0000FF",  
                "#9966FF",  
                "#4C4CFF",  
                "#00FFFF",  
                "#f990a7",  
                "#aad2ed",  
                "#FF00FF",  
                "Blue",  
                "Red",  
                "Blue"  
              ],  
              fill: true  
            }  
          ]  
        },  
        options: {  
          legend: {  
            display: false  
          },  
          scales: {  
            xAxes: [{  
              display: true  
            }],  
            yAxes: [{  
              display: true  
            }],  
          }  
        }  
      });  
    });  
  }  
}

Откройте файл barchart.component.html и добавьте следующий HTML-код.

barchart.component.html

Шаг 7 - Круговая диаграмма

Откройте файл piechart.component.ts и добавьте следующий код.

piechart.component.ts

import { Component, OnInit } from '@angular/core';  
import { Chart } from 'chart.js';  
import { HttpClient } from '@angular/common/http';  
import { Data } from '../../app/Data';  
@Component({  
  selector: 'app-piechart',  
  templateUrl: './piechart.component.html',  
  styleUrls: ['./piechart.component.css']  
})  
export class PiechartComponent implements OnInit {  
    title = 'app';  
    data: Data[];  
    url = 'http://localhost:58617/API/Charts/GetCharts';  
    Player = [];  
    Run = [];  
    chart = [];  
    constructor(private httpClient: HttpClient) { }  
    ngOnInit() {  
      this.httpClient.get(this.url).subscribe((result: Data[]) => {  
        result.forEach(x => {  
          this.Player.push(x.PlayerName);  
          this.Run.push(x.Run);  
        });  
        this  
        this.chart = new Chart('canvas', {  
          type: 'pie',  
          data: {  
            labels: this.Player,  
            datasets: [  
              {  
                data: this.Run,  
                borderColor: '#3cba9f',  
                backgroundColor: [  
                  "#3cb371",  
                  "#0000FF",  
                  "#9966FF",  
                  "#4C4CFF",  
                  "#00FFFF",  
                  "#f990a7",  
                  "#aad2ed",  
                  "#FF00FF",  
                  "Blue",  
                  "Red",  
                  "Blue"  
                ],  
                fill: true  
              }  
            ]  
          },  
          options: {  
            legend: {  
              display: true  
            },  
            scales: {  
              xAxes: [{  
                display: true  
              }],  
              yAxes: [{  
                display: true  
              }],  
            }  
          }  
        });  
      });  
    }  
  }

Откройте файл piechart.component.html и добавьте следующий HTML-код.

piechart.component.html

Шаг 8 - Пончик

Откройте файл doughnut.component.ts и добавьте следующий код.

doughnut.component.ts

import { Component, OnInit } from '@angular/core';  
import { Chart } from 'chart.js';  
import { HttpClient } from '@angular/common/http';  
import { Data } from '../../app/Data';  
@Component({  
  selector: 'app-doughnut',  
  templateUrl: './doughnut.component.html',  
  styleUrls: ['./doughnut.component.css']  
})  
export class DoughnutComponent implements OnInit {  
    data: Data[];  
    url = 'http://localhost:58617/API/Charts/GetCharts';  
    Player = [];  
    Run = [];  
    chart = [];  
    constructor(private httpClient: HttpClient) { }  
    ngOnInit() {  
      this.httpClient.get(this.url).subscribe((result: Data[]) => {  
        result.forEach(x => {  
          this.Player.push(x.PlayerName);  
          this.Run.push(x.Run);  
        });  
        this  
        this.chart = new Chart('canvas', {  
          type: 'doughnut',  
          data: {  
            labels: this.Player,  
            datasets: [  
              {  
                data: this.Run,  
                borderColor: '#3cba9f',  
                backgroundColor: [  
                  "#3cb371",  
                  "#0000FF",  
                  "#9966FF",  
                  "#4C4CFF",  
                  "#00FFFF",  
                  "#f990a7",  
                  "#aad2ed",  
                  "#FF00FF",  
                  "Blue",  
                  "Red",  
                  "Blue"  
                ],  
                fill: true  
              }  
            ]  
          },  
          options: {  
            legend: {  
              display: true  
            },  
            scales: {  
              xAxes: [{  
                display: false  
              }],  
              yAxes: [{  
                display: true  
              }],  
            }  
          }  
        });  
      });  
    }  
  }

Откройте файл doughnut.component.html и добавьте следующий HTML-код.

doughnut.component.html

Шаг 9 - диаграмма Поларареа

Откройте файл polararea.component.ts и добавьте следующий код.

polararea.component.ts

import { Component, OnInit } from '@angular/core';  
import { Chart } from 'chart.js';  
import { HttpClient } from '@angular/common/http';  
import { Data } from '../../app/Data';  
@Component({  
  selector: 'app-polararea',  
  templateUrl: './polararea.component.html',  
  styleUrls: ['./polararea.component.css']  
})  
export class PolarareaComponent implements OnInit {  
    url = 'http://localhost:58617/API/Charts/GetCharts';  
    data: Data[];  
    Player = [];  
    Run = [];  
    Linechart = [];  
    constructor(private httpClient: HttpClient) { }  
    ngOnInit() {  
      this.httpClient.get(this.url).subscribe((result: Data[]) => {  
        result.forEach(x => {  
          this.Player.push(x.PlayerName);  
          this.Run.push(x.Run);  
        });  
        this  
        this.Linechart = new Chart('canvas', {  
          type: 'polarArea',  
          data: {  
            labels: this.Player,  
            datasets: [  
              {  
                data: this.Run,  
                borderColor: '#3cb371',  
                backgroundColor: [  
                  "#3cb371",  
                  "#0000FF",  
                  "#9966FF",  
                  "#4C4CFF",  
                  "#00FFFF",  
                  "#f990a7",  
                  "#aad2ed",  
                  "#FF00FF",  
                  "Blue",  
                  "Red",  
                  "Blue"  
                ],  
              }  
            ],  
          },  
          options: {  
            legend: {  
              display: false  
            },  
            scales: {  
              xAxes: [{  
                display: false  
              }],  
              yAxes: [{  
                display: true  
              }],  
            }  
          }  
        });  
      });  
    }  
  }

Откройте файл polararea.component.html и добавьте следующий HTML-код.

polararea.component.html

Шаг 10

Теперь откройте файл app-routing.module.ts и добавьте следующие строки для создания маршрутизации.

app-routing.module.ts

import { NgModule } from '@angular/core';  
import { Routes, RouterModule } from '@angular/router';  
import { BarchartComponent } from "./barchart/barchart.component";  
import { LinechartComponent } from "./linechart/linechart.component";  
import { PiechartComponent } from "./piechart/piechart.component";  
import { DoughnutComponent } from "./doughnut/doughnut.component";  
const routes: Routes = [  
  {  
    path: 'LineChart', component: LinechartComponent  
  },  
  {  
    path: 'BarChart', component: BarchartComponent  
  },  
  {  
    path: 'PieChart', component: PiechartComponent  
  },  
  {  
    path: 'DoughnutChart', component: DoughnutComponent  
  },  
   { path:'Polarchart',component:PolarareaComponent }
];  
@NgModule({  
  imports: [RouterModule.forRoot(routes)],  
  exports: [RouterModule]  
})  
export class AppRoutingModule { }

Шаг 11

Откройте файл app.component.html и добавьте следующий HTML-код.

app.component.html

  
    
      
      Batsman Performance Analysis

Шаг 12

Теперь откройте файл app.module.ts и добавьте следующий код.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';  
import { NgModule } from '@angular/core';  
import { HttpClientModule } from '@angular/common/http';  
import { AppRoutingModule } from './app-routing.module';  
import { AppComponent } from './app.component';  
import { LinechartComponent } from './linechart/linechart.component';  
import { BarchartComponent } from './barchart/barchart.component';  
import { PiechartComponent } from './piechart/piechart.component';  
import { DoughnutComponent } from './doughnut/doughnut.component';  
import { PolarareaComponent } from './polararea/polararea.component';  
@NgModule({  
  declarations: [  
    AppComponent,  
    LinechartComponent,  
    BarchartComponent,  
    PiechartComponent,  
    DoughnutComponent,  
    PolarareaComponent,  
  ],  
  imports: [  
    BrowserModule,  
    AppRoutingModule,  
    AppRoutingModule,  
    HttpClientModule  
  ],  
  providers: [],  
  bootstrap: [AppComponent]  
})  
export class AppModule { }

Шаг 13

Теперь запустите проект, нажмите на кнопки и проверьте результат.

Линия Диаграмма

Гистограмма

Пончик диаграмма

Диаграмма Поларареа

Резюме

В этой статье мы узнали о Chart.js и о том, как мы добавляем chart.js в приложение Angular для создания диаграмм. В этой статье мы обсудили линейную диаграмму, гистограмму, круговую диаграмму, кольцевую диаграмму и диаграмму полярной области.

Источник:

Create Charts in an Angular 7 Application Using Chart.js - DZone Web Dev

#Angular #ASP.NET

2706

Войти на сайт

Создание диаграмм в приложении Angular 7 с помощью Chart.js

Шаг 1

Шаг 2

Шаг 3

Шаг 4

Шаг 5

Настраиваем приложение Angular

Шаг 1

Шаг 2

Шаг 3

Шаг 4

Шаг 5 - Линейная диаграмма

Шаг 6 - Гистограмма

Шаг 7 - Круговая диаграмма

Шаг 8 - Пончик

Шаг 9 - диаграмма Поларареа

Шаг 10

Шаг 11

Шаг 12

Шаг 13

Линия Диаграмма

Гистограмма

Пончик диаграмма

Диаграмма Поларареа

Резюме

Источник: