Компонент диаграммы полярных областей Angular PrimeNG

Опубликовано: 24 Февраля, 2023

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