web-dev-qa-db-fra.com

chart.js Échec de la création du graphique: impossible d'acquérir le contexte de l'élément donné

Je ne suis jamais entré dans le nœud, je suis donc presque sûr que je fais quelque chose de totalement faux ici car je ne trouve aucune information du tout sur Google.

J'ai un site Django et je voulais une bibliothèque de cartographie JS, j'ai choisi chart.js.

J'ai installé et aimé la documentation, mais après cela, je ne savais pas quoi faire, alors j'ai essayé de remplir les blancs et de suivre leur guide autant que possible. Voici à quoi ressemble mon HTML ...

<script src="/public/node_modules/chart.js/dist/Chart.js"></script>

<canvas id="myChart" width="400" height="400"></canvas>

<script>    
    var ctx = document.getElementById("myChart");
    console.log(ctx);

    var options = {}

    var data = {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [
            {
                label: "My First dataset",
                fill: false,
                lineTension: 0.1,
                backgroundColor: "rgba(75,192,192,0.4)",
                borderColor: "rgba(75,192,192,1)",
                borderCapStyle: 'butt',
                borderDash: [],
                borderDashOffset: 0.0,
                borderJoinStyle: 'miter',
                pointBorderColor: "rgba(75,192,192,1)",
                pointBackgroundColor: "#fff",
                pointBorderWidth: 1,
                pointHoverRadius: 5,
                pointHoverBackgroundColor: "rgba(75,192,192,1)",
                pointHoverBorderColor: "rgba(220,220,220,1)",
                pointHoverBorderWidth: 2,
                pointRadius: 1,
                pointHitRadius: 10,
                data: [65, 59, 80, 81, 56, 55, 40],
                spanGaps: false,
            }
        ]
    };

    var myChart = new Chart({
        type: 'line',
        data: data,
        options: options
    })
</script>

J'essaie juste de faire fonctionner un exemple. Je mets le répertoire node_modules qui a été téléchargé via npm à un endroit où mon serveur les servirait ... et vérifie qu'ils sont servis, mais je reçois cette erreur lorsque j'essaie de créer un graphique. J'ai pris tous les codes des cartes de leurs documents, alors je suis à peu près sûr que cette partie est correcte, mais je ne vois pas pourquoi j'obtiens cette erreur.

javascriptnode.jschart.js
26
deltaskelta

Vous ne passez pas le contexte 2d de la toile (ctx) lorsque vous appelez le constructeur. De la documentation :

Pour créer un graphique, nous devons instancier la classe Chart. Pour ce faire, nous devons passer le nœud, l’instance jQuery ou le contexte 2d de la trame de l’endroit où nous voulons dessiner le graphique.

<canvas id="myChart" width="400" height="400"></canvas>

Tous les formats suivants peuvent être utilisés:

var ctx = document.getElementById('myChart');
var ctx = document.getElementById('myChart').getContext('2d');
var ctx = $('#myChart');
var ctx = 'myChart';

var myChart = new Chart(ctx, {
  type: 'line',
  data: {/* Data here */},
  options: {/* Options here */}
}
32
rckrd

Une autre raison d'obtenir la même erreur est si l'élément référencé par l'id n'est pas un <canvas>. J'ai eu un <div> élément dans mon source HTML, et bien sûr cela n'a pas fonctionné.

74
mavroprovato

Je suis un peu en retard pour la fête, mais si d'autres développeurs parviennent à cet article, assurez-vous de ne pas faire référence à un document ou à une fenêtre. L'équipe angular $ angulaire n'encourage pas l'accès direct à la variable dom. Utilisez plutôt ElementRef

import { Component, OnInit, ElementRef } from '@angular/core';
@Component({
  selector: 'my-compo',
  templateUrl: 'mycompo.html',
})
export class MyCompo implements OnInit {
   myChart:any;
   constructor(private elementRef: ElementRef) {
   }

  ngOnInit(){
   this.chartit();
  }

  chartit(){
     let htmlRef = this.elementRef.nativeElement.querySelector(`#yourCavasId`);
     this.myChart = new Chart(htmlRef, {
        //your data here
     });
  }

}

HTML comme suggéré par @mavroprovato

<canvas id="yourCavasId" ></canvas>
14
Mehdi

vous pouvez utiliser

ajoutez ceci dans votre modèle
<canvas #myCanvas width="500" height="300"></canvas>

ajoutez ceci à votre composant

@ViewChild('myCanvas') canvasRef: ElementRef;
  constructor()

quand vous êtes prêt à dessiner, appelez ceci

 this.ctx = this.canvasRef.nativeElement.getContext('2d');
         this.chart = new Chart(this.ctx, {....})
2
Yene Mulatu

Si cette erreur était due à la tentative d’ajustement du graphique constructeur au lieu de ngAfterContentInit

Personnellement, je n'ai aucun problème à donner le identifiant de toile comme chaîne pour le contexte

this.chart = new Chart('myChartId', {...})
1
Pipo