极客教程Angular PrimeNG BarChart组件
Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，可以用来做很好的造型，这个框架用来制作响应式网站非常方便。在这篇文章中，我们将看到如何在Angular PrimeNG中使用BarChart组件。
柱状图或条形图是一种以矩形柱状形式表示分组数据的图表，其长度与它们所代表的数值成正比。
Angular PrimeNG BarChart组件：有4种类型的Bar Chart，描述如下。
- 垂直条形图。在这个条形图中，数据集的方向是竖直的。
- 水平条形图。在这种条形图中，数据集的方向是水平的
- 多轴条形图。在这个条形图中，数据集的方向是垂直的，标签在Y轴的两边。
- 堆积式条形图。在这种条形图中，数据集被表示为一个在另一个之上。
语法:
<p-chart type="bar"
[data]="basicData"
[options]="Options">
</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
项目结构：它将看起来像如下。
例子1：这个例子描述了Angular PrimeNG中堆叠条形图的基本用法，我们将把条形图调整到水平方向。
- app.component.html
<div id="GFG">
<h1 style="color:green">GeeksforGeeks</h1>
<h2>Angular PrimeNG Bar Chart Stacked</h2>
<div style="width:70%;">
<p-chart type="bar"
[data]="basicData"
[options]="StackedOptions">
</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';
basicData = {
labels: ['Sunday', 'Monday', 'Tuesday', 'Wednesday',
'Thursday', 'Friday', 'Saturday'],
datasets: [
{
label: 'Orders on Swiggy',
backgroundColor: 'lightgreen',
data: [66, 49, 81, 71, 26, 65, 60]
},
{
label: 'Orders on Zomato',
backgroundColor: 'pink',
data: [56, 69, 89, 61, 36, 75, 50]
},
{
label: 'Orders on Uber Eats',
backgroundColor: 'gold',
data: [52, 59, 99, 71, 46, 85, 30]
},
{
label: 'Orders on Licious',
backgroundColor: 'skyblue',
data: [56, 52, 69, 81, 43, 55, 40]
},
]
};
StackedOptions = {
indexAxis: 'y',
plugins: {
legend: {
labels: {
color: '#black'
}
}
},
scales: {
x: {
stacked: true,
ticks: {
color: '#black'
},
grid: {
color: 'rgba(255,255,255,0.2)'
}
},
y: {
stacked: true,
ticks: {
color: '#black'
},
grid: {
color: 'rgba(255,255,255,0.2)'
}
}
}
};
}
- 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 { }
输出:
例子2：这个例子描述了Angular PrimeNG中Horizontal BarChart的基本使用。
- app.component.html
<div id="GFG">
<h1 style="color:green">GeeksforGeeks</h1>
<h2>Angular PrimeNG Bar Chart Horizontal</h2>
<div style="width:70%;">
<p-chart type="bar"
[data]="basicData"
[options]="horizontalOptions">
</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';
basicData = {
labels: ['Sunday', 'Monday', 'Tuesday', 'Wednesday',
'Thursday', 'Friday', 'Saturday'],
datasets: [
{
label: 'Booked',
backgroundColor: 'green',
data: [66, 49, 81, 71, 26, 65, 60]
},
]
};
horizontalOptions = {
indexAxis: 'y',
plugins: {
legend: {
labels: {
color: '#black'
}
}
},
scales: {
x: {
ticks: {
color: '#black'
},
grid: {
color: 'rgba(255,255,255,0.2)'
}
},
y: {
ticks: {
color: '#black'
},
grid: {
color: 'rgba(255,255,255,0.2)'
}
}
}
};
}
- 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 { }
输出:
