Angular PrimeNG极区图组件

Angular PrimeNG是一个开源框架，它有丰富的原生Angular UI组件，可以用来做很好的造型，这个框架用来做响应式网站，非常方便。在这篇文章中，我们将看到Angular PrimeNG中的Polar Area Chart组件。

极地面积图类似于饼图，但每段都有相同的角度–段的半径根据数值的不同而不同。

Angular PrimeNG极区图属性：

data:它表示要显示的数据。
options。它表示在图表中要定制的选项。

语法

<p-chart type="polarArea" 
        [data]="data" 
        [options]="chartOptions" >
</p-chart>

创建Angular应用程序和模块安装。

第1步：使用以下命令创建一个Angular应用程序。

ng new appname

第2步：创建你的项目文件夹即appname后，使用以下命令移动到它。

cd appname

第3步在你给定的目录中安装PrimeNG。

npm install primeng --save
npm install primeicons --save
npm install chart.js --save

项目结构：它将看起来像如下。

Angular PrimeNG极区图组件

Project Structure

示例1：本示例描述了Angular PrimeNG中的极地图组件，只实现了一个数据集。

app.component.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

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

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 { }

输出:

Angular PrimeNG极区图组件

例子2：这个例子描述了Angular PrimeNG中的极地区域图组件，在这里，我们将为极地区域图添加一些背景颜色。

app.component.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

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

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 { }

输出:

Angular PrimeNG极区图组件