Стили линий линейного графика Angular PrimeNG
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