Компонент комбинированной диаграммы Angular PrimeNG
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