Гистограмма Angular PrimeNG с накоплением
Angular PrimeNG — это фреймворк с открытым исходным кодом с богатым набором собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и этот фреймворк используется для очень легкого создания адаптивных веб-сайтов. В этой статье мы узнаем о гистограмме с накоплением в Angular PrimeNG.
Гистограмма или гистограмма — это диаграмма, которая представляет сгруппированные данные в виде прямоугольных столбцов с длиной, пропорциональной значениям, которые они представляют. На гистограмме с накоплением 1 набор данных представлен над другим набором данных в одной полосе. Это можно сделать, установив stacked="true" в настройках. Давайте узнаем об этом на примере
Синтаксис:
<p-chart type="..." [data]="..." [options]="..."> </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
Структура проекта: Это будет выглядеть следующим образом:
Чтобы запустить указанный выше файл, выполните следующую команду:
ng serve --save
Пример 1: В этом примере мы создадим гистограмму с накоплением. Сравним заказы на Zomato, Swiggy, Uber Eats и Licious .
- приложение.component.html:
HTML
< 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 > |
- app.component.ts:
Javascript
import { Component } from "@angular/core" ; @Component({ selector: "app-root" , templateUrl: "./app.component.html" , styleUrls: [ "./app.component.scss" ] }) 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 = { 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:
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.
- приложение.component.html:
HTML
< 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 > |
- 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" ; 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:
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/bar