Chart.js & Angular

Graphische Darstellung der Daten mittels Diagramme

Das Open-Source Projekt chart.js ist eine Diagrammbibliothek für Designer und Entwickler, basierend auf der Programmiersprache JavaScript.

Standardmäßig gibt es 8 verschiedene Diagrammtypen, die alle animiert und angepasst werden können.

  • Balkendiagramme,
  • Liniendiagramme,
  • Flächendiagramme,
  • Streudiagramme,
  • Kuchendiagramme,
  • Donut-Diagramme,
  • Polargebietskarten,
  • Radarkarte

Die Diagramme werden über Canvas dargestellt und passen sich an alle Bildschirmgrößen an. Diagramme vom gleichen Typ können gestapelt werden, einige Diagrammtypen können miteinander kombiniert werden, so wie zum Beispiel Balken- und Liniendiagramme, andere mehrachsig eingestellt, Achsen können vertauscht werden usw. Die Möglichkeiten ChartJs Diagramme anzupassen ist grenzenlos. Durch diese Kombination und Anpassungsfähigkeit der Diagramme hat ChartJs einen hohen Stellenwert unter den Diagrammbibliotheken gewonnen.

Des Weiteren können chartjs-Diagramme optimal dynamisch mit Werten befüllt werden, z.B. mit JSON Daten die über "HTTP POST requests" verschickt werden.

Installation und Einrichtung

Der einfachste Weg chart.js in dein aktuelles Projekt zu integrieren ist die Installation über den node package manager (NPM) oder über den Bower package manager.

npm install chart.js –save
bower install chart.js --save

Du kannst es aber auch einfach über CDN in deiner HTML-Datei im HEAD Bereich einbinden. Die aktuellste ChartJs-Version bekommst du hier: https://cdnjs.com/libraries/Chart.js

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>

Integration - Erstellung des Diagramms

import { Chart } from 'chart.js';

var chart = document.getElementById('horizontalBarChart');
var horizontalBarChart = new Chart(chart, {
      type: 'horizontalBar',
      data: {},
      options: {}
});

Diagramm im HTML Dokument aufrufen

<canvas id="horizontalBarChart">{{horizontalBarChart}}</canvas>

Beispiele

Zunächst werde ich mit Hilfe von Angular Material und Bootstrap das Design der Webanwendung anpassen. Hierfür benötigst du die aktuelle Bootstrap css Datei (https://getbootstrap.com/docs/4.4/getting-started/download/). Die Datei bootstrap-grid.min.css  verschiebst du dann in den assets Ordner deiner Webanwendung. Du kannst auch gleich die bootstrap.min.css Datei herunterladen, wir benötigen jedoch lediglich das Bootstrap-grid System.

Die Bootstrap Datei muss jetzt noch in der Angular Applikation eingebunden werden, indem du folgenden Code im HEAD Bereich der index.html Datei einfügst.

<link href="assets/bootstrap-grid.min.css" rel="stylesheet">

Als nächstes erstellst du über das Terminal 2 neue Komponenten:

ng generate component home
ng generate component bar-chart

Die Ordnerstruktur sollte nun folgendermaßen aussehen:

Zudem müssen einige Komponenten und Module in der Datei app.module.ts eingebunden werden.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HomeComponent } from './home/home.component';
import { MatTableModule } from '@angular/material/table';
import { MatCardModule } from '@angular/material/card';
import { BarChartComponent } from './bar-chart/bar-chart.component';
import { MatDialogModule } from '@angular/material/dialog';
import { MatButtonModule } from '@angular/material/button';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    BarChartComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatTableModule,
    MatCardModule,
    MatDialogModule,
    MatButtonModule
  ],
  entryComponents: [
    BarChartComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }
app.module.ts

Ausgehend von der home-Komponente können wir nun die bar-chart Komponente aufrufen. Zunächst erstellen wir einen Button mit einem "click-Event" im HTML-Dokument. Das "click-Event" tritt ein wenn auf den Button geklickt wird.

Es wird also die Funktion openHorizontalBarChart() aufgerufen. Die Funktion öffnet einen Dialog, welcher eine neue Komponente lädt und diese durch die Methode open öffnet.

Optional kann man den zu öffnende Dialog konfigurieren, indem zum Beispiel Höhe und Breite angegeben, oder Daten an die zu öffnende Komponente übergeben werden.

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material';
import { BarChartComponent } from '../bar-chart/bar-chart.component';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent {

  constructor(private dialog: MatDialog) { }

  openHorizontalBarChart() {
    const dialogRef = this.dialog.open(BarChartComponent, {
      width: '1100px'
    });
    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed')
    });
  }
}
home.component.ts
<div class="container">
    <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4">
            <h1>Chart.js Diagramme</h1>
            <button mat-raised-button color="primary" matTooltip="chart.js - horizontal bar chart"
                (click)="openHorizontalBarChart()"><i class="material-icons">open_in_new</i> horizontal bar chart</button>
        </div>
        <div class="col-md-4"></div>
    </div>
</div>
home.component.html

In der bar-chart Komponente wird nun das eigentliche Diagramm erstellt, konfiguriert und angezeigt.

import { Component, OnInit } from '@angular/core';
import { Chart } from 'chart.js';

@Component({
  selector: 'app-bar-chart',
  templateUrl: './bar-chart.component.html',
  styleUrls: ['./bar-chart.component.scss']
})
export class BarChartComponent implements OnInit {
  public chart: Chart;
  public horizontalBarChart: Chart;

  constructor() { }

  ngOnInit() {
    var chart = document.getElementById('horizontalBarChart');
    var horizontalBarChart = new Chart(chart, {
      type: 'horizontalBar',
      data: {
        labels: ["Label 1", "Label 2", "Label 3"],
        datasets: [{
          label: "Dataset",
          data: [56, 22, 89],
          fill: false,
          backgroundColor: ["rgb(253,200,12)", "rgb(237,145,21)", "rgb(149,187,20)"],
        }]
      },
      options: {
        scales: {
          xAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        },
        title: {
          display: true,
          text: 'Horizontal bar chart example',
          fontColor: "#222"
        }
      }
    });
  }
}
bar-chart.component.ts
<mat-dialog-content>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <mat-card>
                    <mat-card-content>
                        <canvas id="horizontalBarChart">{{horizontalBarChart}}</canvas>
                    </mat-card-content>
                </mat-card>
            </div>
        </div>
    </div>
</mat-dialog-content>
bar-chart.component.html

Einen Blick auf die Webanwendung zeigt folgendes Ergebnis: