Chart.js

Chart.js

Chart.js 官方网站

Chart.js 中文网站

Chart.js Document

Adding Responsive Charts & Graphs to Ionic 2 & 3 Applications

Install Chart.js

run the following command:

npm install chart.js --save

use Chart.js anywhere you like by importing it like this:

import { Chart } from 'chart.js';

Set up the Template

<canvas #canvas></canvas>

invalid values, the canvas doesn't resize :responsive

<canvas #canvas height="80vh" width="100vw"></canvas>

Create the Graphs

AfterViewInit

TypeError: Cannot read property 'nativeElement' of undefined

viewchild-not-working-cannot-read-property-nativeelement-of-undefined

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


@Component({
  selector: 'chart',
  templateUrl: "chart.html",
  providers: []
})

export class IonpChartComponent implements AfterViewInit {

  @Input('chart')
  chart: any;
  @ViewChild('canvas') canvas;

  chartCanvas: any;

  constructor(private logger: Logger) { }

  ngAfterViewInit() {
    this.ionViewDidLoad();
  }

  ionViewDidLoad() {
      this.chartCanvas = new Chart(this.canvas.nativeElement, this.chart);
    }
  }

}

Bar

sample:

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            //Legend
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

group:

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            //Legend
            label: 'datasets1',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgba(255,99,132,1)',
            hoverBackgroundColor : "#FF6384",
            borderWidth: 1
        },{
            //Legend
            label: 'datasets2',
            data: [5, 2, 3, 12, 19, 3],
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor: 'rgba(54, 162, 235, 1)',
            hoverBackgroundColor:"#36A2EB",
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

Doughnut

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        //Legend
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    }
});

Advanced

How to display data values on Chart.js: stackoverflow

Show values on each arc doughnut Chart.js :stackoverflow