Стили линий линейного графика Angular PrimeNG

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

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

Линейная диаграмма или линейный график — это тип диаграммы, которая отображает информацию в виде ряда точек данных, называемых «маркерами», соединенных отрезками прямой линии. Линейная диаграмма может быть разных стилей, например, заполненной, с рамкой или пунктирной линией.

Синтаксис:

<p-chart type="line" 
         [data]="Data" 
         [options]="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

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

Пример 1: В этом примере описывается базовое использование стилей линий линейного графика в Angular PrimeNG.

app.component.html

HTML

<div id="GFG">
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h2>Angular PrimeNG Line Chart Styles </h2>
    <div style="width:50%;">
        <p-chart type="line" 
                 [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",
    styleUrls: ["./app.component.css"]
})
export class AppComponent {
    title = "GFG";
    data = {
        labels: ["January", "February", "March", 
                 "April", "May", "June", "July"],
        datasets: [
  
            {
                label: " Dataset",
                data: [12, 51, 62, 33, 21, 62, 45],
                fill: true,
                borderColor: "#FFA726",
                tension: .4,
                backgroundColor: "rgba(255,167,38,0.2)"
            }
        ]
    };
    chartOptions = {
        plugins: {
            legend: {
                labels: {
                    color: "#495057"
                }
            }
        }
    };
}

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, где мы используем стиль линейного графика с рамкой и пунктирную рамку.

app.component.html

HTML

<div id="GFG">
    <h1 style="color:green">GeeksforGeeks</h1>
    <h2>Angular PrimeNG Line Chart Styles </h2>
    <div style="width:50%;">
        <p-chart type="line" 
                 [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",
    styleUrls: ["./app.component.css"]
})
export class AppComponent {
    title = "GFG";
    data = {
        labels: ["January", "February", "March",
                 "April", "May", "June", "July"],
        datasets: [
            {
                label: "First Dataset",
                data: [65, 59, 80, 81, 56, 55, 40],
                fill: false,
                tension: .4,
                borderColor: "#42A5F5"
            },
            {
                label: "Second Dataset",
                data: [12, 51, 62, 33, 21, 62, 45],
                fill: false,
                borderDash: [5, 5],
                borderColor: "#FFA726",
                tension: .4,
                backgroundColor: "rgba(255,167,38,0.2)"
            }
        ]
    };
    chartOptions = {
        plugins: {
            legend: {
                labels: {
                    color: "#495057"
                }
            }
        }
    };
}

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

Technical Scripter Picked AngularJS

Стили линий линейного графика Angular PrimeNG

HTML

Javascript

Javascript

HTML

Javascript

Javascript

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