menu FixWins.com Spring MVC Spring Boot NodeJS+ExpressJS+Mysql ReactJS+NodeJS+Mysql Angular Android PFE
Spring MVC Spring Boot NodeJS+ExpressJS+Mysql ReactJS+NodeJS+Mysql Angular PFE

Angular:Charts js

folder Projet: angularApp
Générer des barChart à l'aide du librarie Charts JS

Installer Charts js

npm install chart.js@2.9.3 --save
npm install ng2-charts@2.2.3 --save

app.component.html

<div style="padding:10px;border:1px solid #ddd;margin:10px;">
<div class="chart-wrapper">
<canvas baseChart
[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[plugins]="barChartPlugins"
[legend]="barChartLegend"
[chartType]="barChartType">
</canvas>
</div>
</div>

app.component.ts

import { Component } from '@angular/core';
import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
import { Label } from 'ng2-charts';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
barChartOptions: ChartOptions = {
responsive: true,
};
barChartLabels: Label[] = ['groupe1', 'groupe2', 'groupe3', 'groupe4', 'groupe5', 'groupe6','groupe7'];
barChartType: ChartType = 'bar';//bar,line,pie
barChartLegend = true;
barChartPlugins = [];
barChartData: ChartDataSets[] = [
{ data: [12.5, 17.45, 10.5, 15, 5, 14,18], label: 'Moyenne des notes par Groupe' }
];
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

//importer le module ChartsModule contenant les fonctionnalités de charts js
import { ChartsModule } from 'ng2-charts';
@NgModule({
declarations: [
AppComponent
],
imports: [
ChartsModule,
BrowserModule,
AppRoutingModule,
FormsModule ,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }