Bonjour,

Je rencontre un problème avec ChartJS, en effet les graphs ne s'affichent pas !

Ce n'est pas vraiment du Javascript mais du Typescript j'espère que ce n'est pas hors sujet.

Je n'ai pas l'idée, mais je pense qu'il y a un problème au niveau de l'objet Chart.

La petite doc en Javascript de la bibliothèque : http://www.chartjs.org/docs/latest/charts/doughnut.html

Voici mon component TypeScript :

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

@Component({
  selector: 'app-livret-a',
  templateUrl: './livret-a.component.html',
  styleUrls: ['./livret-a.component.css']
})
export class LivretAComponent implements OnInit {

  lineChart: Chart;
  pieChart: Chart;

  constructor() { }

  ngOnInit() {
    this.lineChart = new Chart('lineChart', {
      type: 'line',
      data : {
        labels : ['Janv', 'Feb'],
        datasets: [{
          label: 'Number of Items sold in mouths',
          data: [1, 2],
          fill: false,
          lineTension: 0.2,
          borderColor: 'red',
          borderWidth: 1,
        }]
      }
    });

    this.pieChart = new Chart('pieChart', {
      type: 'pie',
      data: {
        datasets: [{
          data: [10, 20, 30]
        }],
        labels: [
          'Red',
          'Yellow',
          'Blue'
        ]
      }
    });
  }
}

Mon html :

<div *ngIf="pieChart">
  <p>ok</p>
  <canvas id="pieChart">{{ pieChart }}</canvas>
</div>

Faut savoir que le ok s'affiche correctement.

Voici le vue via mon navigateur internet :

Ma console de Firefox me dit : Failed to create chart: can't acquire context from the given item

---

J'ai voulu test autrement mais pas un grand succès il affiche rien lui sauf mon ok et pas d'erreur en console...

Je me suis inspiré de ça : https://stackblitz.com/edit/canvas-example?file=app%2Fapp.component.ts

Component TS:

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

@Component({
  selector: 'app-livret-a',
  templateUrl: './livret-a.component.html',
  styleUrls: ['./livret-a.component.css']
})
export class LivretAComponent implements AfterViewInit {

pieChart: Chart;

@ViewChild('canvasEl') canvasEl: ElementRef;

private context: CanvasRenderingContext2D;

constructor() {}

ngAfterViewInit() {
  this.context = (this.canvasEl.nativeElement as HTMLCanvasElement).getContext('2d');

  this.draw();
}

  private draw() {
    this.pieChart = new Chart(this.context, {
      type: 'pie',
      data: {
        datasets: [{
          data: [10, 20, 30]
        }],
        labels: [
          'Red',
          'Yellow',
          'Blue'
        ]
      }
    });
  }
}

Mon html :

<p>ok</p>
<canvas #canvasEl width=400 height=400></canvas>

Pour ma part je pense avoir fait mon possible, je n'ai vraiment pas d'idée

-
Edité par MatthiasCln 23 septembre 2018 à 17:38:05

Bonjour, une solution a-t-elle été trouver ? ou une similaire ?