Angular ile Chart.js Kütüphanesi Kullanarak Grafik Oluşturmak: Bölüm 1

Veriler ile oynamak her ne kadar hoş olsa da, bazen sadece sayılara liste halinde bakmak yetmiyor, bu verileri grafiklere döktüğümüz zaman çok daha okunabilir ve daha anlamlı hale bürünüyorlar.

Bu yazıda;
Angular ile Chart.js’in kütüphanesi olan ng2-charts kullanarak dummy dataları basit şekilde grafiklere aktarmayı örneklemeye çalışacağım.

İlk olarak Angular CLI ile projemizi oluşturalım,

$ ng new angular-chartjs --routing

bu satırı çalıştırdıktan sonra size hangi css preprocessor ile çalışacağınızı soracaktır.

bkz:

ben, scss preprocessor’ü seçiyorum.

Oluşturduğumuz proje yoluna gidiyoruz:

$ cd angular-chartjs

Projede kullanacağımız kütüphaneleri indiriyoruz:
(buradan da referans alabilirsiniz)

npm install --save ng2-charts
npm install --save chart.js
npm install bootstrap

Projemizde kullanacağımız Bootstrap kütüphanesini, projenin her yerinde kullanabilmek için src > style.scss’in içine import etmemiz gerekiyor.

@import '~bootstrap/dist/css/bootstrap.min.css';

Kütüphaneleri ekleme işlemleri tamamlandı. 👍🏻

app.module.ts altında ChartsModule’un import edildiğinden emin olalım:

import { ChartsModule } from 'ng2-charts';

src > app > app.module.ts

Dizin değiştirip; bar,pie,radar,doughnut chartları için componentleri oluşturalım:

cd src/app 

bar-chart

ng g c bar-chart

pie-chart

ng g c pie-chart

doughnut-chart

ng g c doughnut-chart

radar-chart

ng g c radar-chart

Componentleri oluşturduk, şimdi routing 🚏 ayarlarına geçelim:

app.modules.ts dosyasında importların altına,

const routes: Routes = [
{ path: 'bar-chart', component: ChartsComponent },
{ path: 'pie-chart', component: PieChartComponent },
{ path: 'radar-chart', component: RadarChartComponent },
{ path: 'doughnut-chart', component: DougnutChartComponent },
];

kodlarını ekleyip,
NgModule > imports altına;

imports: [
    BrowserModule,
    ChartsModule,
    RouterModule.forRoot(routes),
],

eklemesini yapalım.
Artık app.modules.ts ‘i kapatabilirsiniz.

app.component.html’ e basit bir html tasarımı ekleyelim.

app.component.html

bar-chart.component.html

bar-chart-component.html

bar-chart.component.ts

bar-chart-component-ts

Örnek vermesi için, chart.js’in options parametrelerini çoğaltmaya çalıştım.

Çıktı:

Bar Chart

👉🏻 Doughnut Chart

Doughnut Chart

doughnut-chart.component.html

<div class="chart-custom">  
  <canvas baseChart 
   [data]="chartData" 
   [labels]="chartLabel" 
   [chartType]="chartType" 
   [options]="chartOptions"    
   width="500" height="300">
  </canvas>
</div>

doughnut-chart.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-dougnut-chart',
  templateUrl: './dougnut-chart.component.html',
  styleUrls: ['./dougnut-chart.component.scss']
})
export class DougnutChartComponent implements OnInit {

  public chartType: string = "doughnut";
  public chartLabel: string[] = [];
  public chartData: number[] = [];


  chartFilled() {

    this.chartLabel.push('Red', 'Blue', 'Yellow', 'Gray', 'Green');

    this.chartData.push(12, 22, 32, 42, 52);

  }

  chartOptions = {

    animation: {
      duration: 1000,
      easing: "easeInOutQuad"
    },

    responsive: true,
    legend: {
      display: true,
      position: "right",
      fullWidth: false,
      reverse: true
    },
  };


  ngOnInit() {
    this.chartFilled();
  }

}

👉🏻 Pie Chart

Pie Chart

pie-chart.component.html

<div class="chart-custom">  
  <canvas baseChart 
   [data]="chartData" 
   [labels]="chartLabel" 
   [chartType]="chartType" 
   [options]="chartOptions"    
   width="500" height="300">
  </canvas>
</div>

pie-chart.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-pie-chart',
  templateUrl: './pie-chart.component.html',
  styleUrls: ['./pie-chart.component.scss']
})
export class PieChartComponent implements OnInit {

  constructor() { }

  public chartType: string = "pie";
  public chartLabel: string[] = [];
  public chartData: number[] = [];

  chartFilled() {

    this.chartLabel.push('Red', 'Blue', 'Yellow', 'Gray', 'Green');

    this.chartData.push(12, 22, 32, 42, 52);

  }

  chartOptions = {

    animation: {
      duration: 1000,
      easing: "easeInOutQuad"
    },

    responsive: true,
    legend: {
      display: true,
      position: "right",
      fullWidth: false,
      reverse: true
    },
  };


  ngOnInit() {
    this.chartFilled();
  }

}

👉🏻 Radar Chart

Radar Chart

radar-chart.component.html

<div class="chart-custom">
  <canvas baseChart 
   [datasets]="chartData" 
   [labels]="chartLabel"   
   [chartType]="chartType" 
   [options]="chartOptions"
   width="500" height="300">
  </canvas>
</div>

radar-chart.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-radar-chart',
  templateUrl: './radar-chart.component.html',
  styleUrls: ['./radar-chart.component.scss']
})
export class RadarChartComponent implements OnInit {

  public chartType: string = "radar";
  public chartLabel: string[] = [];
  chartData: any;

  chartFilled() {

    this.chartLabel.push('Q1', 'Q2', 'Q3', 'Q4');

    this.chartData = [
      { data: [90, 150, 200, 45], label: '2018' },
      { data: [320, 230, 280, 70], label: '2019' }
    ];

  }


  chartOptions = {

    animation: {
      duration: 1000,
      easing: "easeInOutQuad"
    },
    responsive: true,
    legend: {
      display: true,
      position: 'top',
      cornerRadius: 10,
      titleSpacing: 4,
      footerFontStyle: 'bold',
      multiKeyBackground: '#eee'
    },
    hover: {
      mode: 'nearest',
      intersect: true
    },
  }

  ngOnInit() {
    this.chartFilled();
  }

}

⭐️ Bu şekilde, elinizdeki verileri basit işlemlerle detaylı grafiklendirme yapabilirsiniz.

İlgili projeyi Github üzerinden, şurada paylaştım.

Buradan chart.js’in dokümantasyonuna ulaşabilirsiniz.
Chart.js’in propertylerine javascript fonksiyonları yazıp grafiklerinizi daha da detaylandırabilir ve görsel açıdan zenginleştirebilirsiniz.

Güzel bir dünya dileğiyle, sevgiler 🙏

Bu serinin devamı niteliğindeki ikinci içeriğe buradan ulaşabilirsiniz:

VS Code üzerinde .NET Core 2.1 Web API & Angular 7, Chart.js Kütüphanesini Kullanarak Grafik Oluşturmak: Bölüm 2

VS Code üzerinde .NET

Onur Uzun (@onuriart) | Twitter