Компонент круговой диаграммы Angular PrimeNG
Angular PrimeNG — это фреймворк с открытым исходным кодом с богатым набором собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и этот фреймворк используется для очень легкого создания адаптивных веб-сайтов. В этой статье мы увидим компонент круговой диаграммы в Angular PrimeNG.
Круговая диаграмма представляет собой круговой статистический график, который разделен на срезы для иллюстрации числовых пропорций.
Синтаксис:
<p-chart type="pie" [data]="data" [options]="chartOptions" > </p-chart>
Создание приложения Angular и установка модуля:
Шаг 1: Создайте приложение Angular, используя следующую команду.
ng new appname
Шаг 2: После создания папки проекта, т. е. имени приложения, перейдите к ней с помощью следующей команды.
cd appname
Шаг 3: Установите PrimeNG в указанный вами каталог.
npm install primeng --save npm install primeicons --save npm install chart.js --save
Структура проекта: Это будет выглядеть следующим образом:
Пример 1. В этом примере описывается компонент круговой диаграммы в Angular PrimeNG, где мы будем отображать 3 набора данных на круговой диаграмме.
- app.component.html
HTML
< div id = "GFG" > < h1 style = "color:green" >GeeksforGeeks</ h1 > < h2 >Angular PrimeNG Pie Chart </ h2 > < div style = "width:20%;" > < p-chart type = "pie" [data]="data" [options]="chartOptions" [style]="{"width": "40%"}"> </ p-chart > </ div > </ div > |
- app.component.ts
Javascript
import { Component } from "@angular/core" ; @Component({ selector: "app-root" , templateUrl: "./app.component.html" , styleUrls: [ "./app.component.css" ] }) export class AppComponent { title = "GFG" ; data = { labels: [ "A" , "B" , "C" ], datasets: [ { data: [300, 50, 100], backgroundColor: [ "#42A5F5" , "#66BB6A" , "#FFA726" ], } ] }; chartOptions = { plugins: { legend: { labels: { color: "#495057" } } } } } |
- app.module.ts
Javascript
import { NgModule } from "@angular/core" ; import { BrowserModule } from "@angular/platform-browser" ; import { AppComponent } from "./app.component" ; import { ChartModule } from "primeng/chart" ; @NgModule({ declarations: [ AppComponent, ], imports: [ BrowserModule, ChartModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
Выход:
Пример 2: В этом примере мы добавим hoverOptions с круговой диаграммой. Когда мы наведем курсор на круговую диаграмму, цвет компонента изменится. Также добавьте 4 набора данных для отображения
- app.component.html
Javascript
<div id= "GFG" > <h1 style= "color:green" >GeeksforGeeks</h1> <h2>Angular PrimeNG Pie Chart </h2> <div style= "width:30%;" > <p-chart type= "pie" [data]= "data" [options]= "chartOptions" [style]= "{"width": "40%"}" > </p-chart> </div> </div> |
- app.component.ts
Javascript
import { Component } from "@angular/core" ; @Component({ selector: "app-root" , templateUrl: "./app.component.html" , styleUrls: [ "./app.component.css" ] }) export class AppComponent { title = "GFG" ; data = { labels: [ "A" , "B" , "C" , "D" ], datasets: [ { data: [300, 50, 100, 60], backgroundColor: [ "#42A5F5" , "#66BB6A" , "#FFA726" , "red" ], hoverBackgroundColor: [ "#64B5F6" , "#81C784" , "#FFB74D" , "pink" ] } ] }; chartOptions = { plugins: { legend: { labels: { color: "#495057" } } } } } |
- app.module.ts
Javascript
import { NgModule } from "@angular/core" ; import { BrowserModule } from "@angular/platform-browser" ; import { AppComponent } from "./app.component" ; import { ChartModule } from "primeng/chart" ; @NgModule({ declarations: [ AppComponent, ], imports: [ BrowserModule, ChartModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
Выход:
Ссылка: http://primefaces.org/primeng/chart/pie