Компонент Angular PrimeNG ChartModel

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

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

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

Charts.js: Chart.js — это библиотека диаграмм на основе HTML5, которая широко используется для создания статических, а также динамических диаграмм, таких как гистограммы, круговые диаграммы, линейные графики и т. д.
Компонент диаграммы: компонент диаграммы используется для отображения диаграммы на странице. Имя класса — UIChart, а тег элемента — p-chart.
Обнаружение изменений: изменение данных не запускается автоматически. Чтобы перерисовать себя, необходимо создать новый объект данных.
Свойства: свойства используются для настройки компонента в соответствии с различными потребностями и соответствующей структуры компонента.
Методы: методы используются для выполнения некоторых действий над компонентом и изменения его внешнего вида или функциональности.
Типы диаграмм: тип диаграммы определяется с помощью свойства type. В настоящее время доступно 6 вариантов; круговая диаграмма, пончик, линия (линия или горизонтальная полоса), полоса, радар и полярная область.
Данные: данные диаграммы предоставляются с помощью привязки к свойству данных, каждый тип имеет свой собственный формат данных.
Параметры: общие параметры диаграммы определяются с помощью свойства options.
События: события используются для запуска некоторых функций при некоторых взаимодействиях с компонентом. Когда данные выбираются с помощью события click, компонент диаграммы предоставляет обратный вызов onDataSelect для обработки выбранных данных.
Отзывчивый: диаграммы по умолчанию являются адаптивными, и единицы измерения vw-vh можно использовать при настройке ширины и высоты диаграммы.

Синтаксис :

Модуль импорта диаграммы

import {ChartModule} from "primeng/chart";

Используйте его следующим образом

<p-chart type="pie" [data]="data"></p-chart>

Создание приложения Angular и установка модуля:

Создайте приложение Angular, используя следующую команду.

ng new geeks_angular

После создания папки вашего проекта, например, geeks_angular, перейдите к ней с помощью следующей команды.

cd geeks_angular

Установите PrimeNG в указанный вами каталог.

npm install primeng --save
npm install primeicons --save
npm install chart.js --save

Включите его в проект

"scripts": [
    "../node_modules/chart.js/dist/chart.js",
    //..others
],

Структура проекта: Структура проекта будет выглядеть следующим образом:

Пример 1. В следующем примере у нас есть круговая диаграмма с некоторыми данными.

приложение.component.html:

HTML

<h1 style="color: green; 
               text-align:center;">
  GeeksforGeeks
</h1>
<h3>
  Angular PrimeNG ChartModel Component
</h3>
<p-chart type="pie" 
         [data]="basicData">
</p-chart>

app.component.ts

Javascript

import { Component } from "@angular/core";
import { MessageService } from "primeng/api";
import { PrimeNGConfig } from "primeng/api";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    providers: [MessageService],
})
export class AppComponent {
    basicData: any;
    basicOptions: any;
    constructor(
        private messageService: MessageService,
        private primengConfig: PrimeNGConfig
    ) { }
    ngOnInit() {
        this.basicData = {
            labels: ["January", "February", "March",
                     "April", "May", "June"],
            datasets: [
                {
                    label: "2020",
                    data: [65, 59, 80, 81, 56, 55],
                    tension: 0.4,
                    backgroundColor: [
                        "#FF6371",
                        "#36A2EB",
                        "#FFCE45",
                        "#ff6200",
                        "#00ffbf",
                        "#9900ff",
                    ],
                    borderColor: "#42A5F5",
                },
            ],
        };
        this.basicOptions = {
            title: {
                display: true,
                text: "Article Views",
                fontSize: 32,
                position: "top",
            },
        };
    }
}

app.module.ts

Javascript

import { NgModule } from "@angular/core";
import { BrowserModule } 
    from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { ButtonModule } from "primeng/button";
import { ToastModule } from "primeng/toast";
import { RippleModule } from "primeng/ripple";
import { ImageModule } from "primeng/image";
import { ChartModule } from "primeng/chart";
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ToastModule,
        ButtonModule,
        RippleModule,
        FormsModule,
        ImageModule,
        ChartModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Выход:

Пример 2. В следующем примере мы показываем всплывающее уведомление при щелчке компонента диаграммы.

app.component.html

HTML

<h1 style="color: green; 
           text-align:center;">
  GeeksforGeeks
</h1>
<h3>
  Angular PrimeNG ChartModel Component
</h3>
<p-toast></p-toast>
<p-chart type="pie"
           [data]="basicData"
           (onDataSelect)="handleClick($event)">
</p-chart>

app.component.ts

Javascript

import { Component } from "@angular/core";
import { MessageService } from "primeng/api";
import { PrimeNGConfig } from "primeng/api";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    providers: [MessageService],
})
export class AppComponent {
    basicData: any;
    basicOptions: any;
    constructor(
        private messageService: MessageService,
        private primengConfig: PrimeNGConfig
    ) { }
    ngOnInit() {
        this.basicData = {
            labels: ["January", "February", "March", 
                     "April", "May", "June"],
            datasets: [
                {
                    label: "2020",
                    data: [65, 59, 80, 81, 56, 55],
                    tension: 0.4,
                    backgroundColor: [
                        "#FF6371",
                        "#36A2EB",
                        "#FFCE45",
                        "#ff6200",
                        "#00ffbf",
                        "#9900ff",
                    ],
                    borderColor: "#42A5F5",
                },
            ],
        };
        this.basicOptions = {
            title: {
                display: true,
                text: "Article Views",
                fontSize: 32,
                position: "top",
            },
        };
    }
    handleClick(event) {
        this.messageService.add({
            severity: "success",
            summary: "GeeksforGeeks",
            detail: "Data Item Clicked",
        });
    }
}

app.module.ts

Javascript

import { NgModule } from "@angular/core";
import { BrowserModule } 
    from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { ButtonModule } from "primeng/button";
import { ToastModule } from "primeng/toast";
import { RippleModule } from "primeng/ripple";
import { ImageModule } from "primeng/image";
import { ChartModule } from "primeng/chart";
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ToastModule,
        ButtonModule,
        RippleModule,
        FormsModule,
        ImageModule,
        ChartModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Выход:

Ссылка: http://primefaces.org/primeng/chart

Technical Scripter Picked AngularJS

Компонент Angular PrimeNG ChartModel

HTML

Javascript

Javascript

HTML

Javascript

Javascript

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