Компонент диаграммы полярных областей Angular PrimeNG
Angular PrimeNG — это фреймворк с открытым исходным кодом с богатым набором собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и этот фреймворк используется для очень легкого создания адаптивных веб-сайтов. В этой статье мы увидим компонент диаграммы полярных областей в Angular PrimeNG.
Диаграммы с полярными областями похожи на круговые диаграммы, но каждый сегмент имеет одинаковый угол — радиус сегмента различается в зависимости от значения.
Атрибуты полярной диаграммы Angular PrimeNG:
- data: представляет данные, которые должны быть отображены.
- options: представляет параметры, которые можно настроить на диаграмме.
Синтаксис
<p-chart type="polarArea"
[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 с реализацией только 1 набора данных.
- app.component.html
HTML
<div id="GFG"> <h1 style="color:green">GeeksforGeeks</h1> <h2>Angular PrimeNG PolarArea Chart </h2> <div style="width:30%;"> <p-chart type="polarArea" [data]="data" [options]="chartOptions" [style]="{"width": "40%"}"> </p-chart> </div></div> |
- app.component.ts
HTML
import { Component } from "@angular/core"; @Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"]})export class AppComponent { title = "GFG"; data = { datasets: [{ data: [11,16,7,3,14], label: "Dataset 1" }, ], labels: ["A","B","C","D","E"] }; chartOptions = { plugins: { legend: { labels: { color: "#495057" } } }, scales: { r: { grid: { color: "#ebedef" } } } }} |
- 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: В этом примере описывается компонент диаграммы полярных областей в Angular PrimeNG, где мы добавим несколько цветов фона к диаграмме полярных областей.
- app.component.html
HTML
<div id="GFG"> <h1 style="color:green">GeeksforGeeks</h1> <h2>Angular PrimeNG PolarArea Chart </h2> <div style="width:30%;"> <p-chart type="polarArea" [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 = { datasets: [{ data: [11,16,7,3,14], backgroundColor: [ "#42A5F5", "#66BB6A", "#FFA726", "#26C6DA", "#7E57C2" ], label: "Dataset 1" }, ], labels: [ "Red", "Green", "Yellow", "Pink", "Blue" ] }; chartOptions = { plugins: { legend: { labels: { color: "#495057" } } }, scales: { r: { grid: { color: "#ebedef" } } } }} |
- 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/polararea