Гистограмма Angular PrimeNG с накоплением

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

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

Technical Scripter Picked AngularJS

Гистограмма Angular PrimeNG с накоплением

HTML

Javascript

Javascript

HTML

Javascript

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ