Компонент комбинированной диаграммы Angular PrimeNG

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

Angular PrimeNG — это фреймворк с открытым исходным кодом с богатым набором собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и этот фреймворк используется для очень легкого создания адаптивных веб-сайтов. В этой статье мы увидим компонент комбинированной диаграммы Angular PrimeNG.

Компонент Combo Chart предоставляет различные виды диаграмм, которые можно комбинировать на одном графике, чтобы визуализировать различные наборы данных в данный момент.

Синтаксис:

<p-chart type="bar" 
         [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. В этом примере описывается базовое использование компонента Combo Chart в Angular PrimeNG, где мы будем комбинировать гистограмму и линейную диаграмму.

app.component.html

HTML

<div id="GFG">
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h2>Angular PrimeNG Combo Chart </h2>
    <div style="width:30%;">
        <p-chart type="bar" 
                 [data]="data" 
                 [options]="chartOptions">
        </p-chart>
    </div>
</div>

app.component.ts

HTML

import { Component } from "@angular/core";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
})
export class AppComponent {
    title = "GFG";
    data = {
        labels: ["A", "B", "C", "D", "E", "F", "G"],
        datasets: [{
            type: "line",
            label: "City",
            borderColor: "red",
            borderWidth: 2,
            fill: false,
            data: [49, 24, 22, 38, 26, 46, 54]
        },
        {
            type: "bar",
            label: "States",
            backgroundColor: "#66BB6A",
            data: [31, 74, 34, 65, 47, 45, 75],
            borderColor: "white",
            borderWidth: 2
        }]
    };
  
    chartOptions = {
        plugins: {
            legend: {
                labels: {
                    color: "black"
                }
            }
        },
        scales: {
            x: {
                ticks: {
                    color: "black"
                },
                grid: {
                    color: "grey"
                }
            },
            y: {
                ticks: {
                    color: "black"
                },
                grid: {
                    color: "grey"
                }
            }
        }
    };
}

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: Это еще один пример, описывающий использование компонента Combo Chart в Angular PrimeNG, где мы будем комбинировать радарную диаграмму и линейную диаграмму.

app.component.html

HTML

<div id="GFG">
    <h1 style="color:green">
            GeeksforGeeks
    </h1>
    <h2>Angular PrimeNG Combo Chart </h2>
    <div style="width:60%;">
        <p-chart type="bar" 
                 [data]="data" 
                 [options]="chartOptions">
        </p-chart>
    </div>
</div>

app.component.ts

Javascript

import { Component } from "@angular/core";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
})
export class AppComponent {
    title = "GFG";
    data = {
        labels: ["A", "B", "C", "D", "E", "F", "G"],
        datasets: [{
            type: "line",
            label: "City ",
            borderColor: "pink",
            borderWidth: 2,
            fill: false,
            data: [48, 27, 22, 38, 66, 66, 44]
        },
        {
            type: "radar",
            label: "State",
            backgroundColor: "purple",
            data: [25, 74, 34, 65, 47, 65, 55],
            borderColor: "white",
            borderWidth: 2
        }]
    };
  
    chartOptions = {
        plugins: {
            legend: {
                labels: {
                    color: "blue"
                }
            }
        },
        scales: {
            x: {
                ticks: {
                    color: "blue"
                },
                grid: {
                    color: "grey"
                }
            },
            y: {
                ticks: {
                    color: "blue"
                },
                grid: {
                    color: "grey"
                }
            }
        }
    };
}

app.module.ts

HTML

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/combo

Technical Scripter Picked AngularJS

Компонент комбинированной диаграммы Angular PrimeNG

HTML

HTML

Javascript

HTML

Javascript

HTML

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