chart.js Diagramm konnte nicht erstellt werden: Kontext aus dem angegebenen Element kann nicht abgerufen werden

Lesezeit: 5 Minuten

Ich bin nie in den Knoten gekommen, also bin ich mir ziemlich sicher, dass ich hier etwas massiv falsch mache, da ich beim Googeln überhaupt keine Informationen finden kann.

Ich habe eine Django-Site und wollte eine JS-Diagrammbibliothek, ich habe mich für chart.js entschieden.

Ich habe die Dokumentation installiert und mag sie, aber danach bin ich mir nicht sicher, was ich tun soll, also habe ich versucht, die Lücken auszufüllen und ihrer Anleitung so weit wie möglich zu folgen. So sieht mein HTML aus….

<script src="https://stackoverflow.com/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>

Ich versuche nur, ein Beispiel zum Laufen zu bringen. Ich habe das Verzeichnis node_modules, das über npm heruntergeladen wurde, irgendwo abgelegt, wo mein Server sie bereitstellen würde … und überprüft, ob sie bereitgestellt werden, aber dann erhalte ich diesen Fehler, wenn ich versuche, ein Diagramm zu erstellen. Ich habe alle Diagrammcodes aus ihren Dokumenten genommen, also bin ich mir ziemlich sicher, dass dieser Teil richtig ist, aber ich kann nicht sehen, warum ich diesen Fehler bekomme.

Ein weiterer Grund für denselben Fehler ist, wenn das Element, auf das sich die ID bezieht, nicht a ist <canvas>. Ich hatte ein <div> Element in meiner HTML-Quelle, und natürlich hat es nicht funktioniert.

  • Ich hatte genau diesen Tippfehler!

    – Vektornaut

    4. Mai 2021 um 21:26 Uhr

  • Wow, danke, Mann. Ich war wirklich verwirrt, warum es nicht funktionierte, bis ich das div entfernte und die ID in das Canvas-Tag einfügte.

    – Ja

    2. Juli 2021 um 21:09 Uhr

  • Ebenso, wenn Sie das Canvas-Element auf Ihrer Seite einfach weggelassen haben!! Oh je.

    – Antonius

    21. März um 11:01 Uhr

Benutzeravatar von rckrd
rückw

Sie übergeben den 2D-Kontext der Leinwand nicht (ctx) beim Aufruf des Konstruktors. Von dem Dokumentation:

Um ein Diagramm zu erstellen, müssen wir die Chart-Klasse instanziieren. Dazu müssen wir den Knoten, die jQuery-Instanz oder den 2D-Kontext des Canvas übergeben, in dem wir das Diagramm zeichnen möchten.

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

Stellen Sie sicher, dass Sie das Canvas-Tag in HTML deklarieren Vor das Skript, das das Chart.js-Objekt erstellt. Andernfalls wird das Skript ausgeführt und versucht, einen Verweis auf einen nicht vorhandenen Zeichenbereich zu finden. Im Skript kann eines der folgenden Formate verwendet werden, um einen Verweis auf die Zeichenfläche zu erhalten, die dann an den Chart.js-Konstruktor übergeben wird.

var ctx = document.getElementById('myChart'); // node
var ctx = document.getElementById('myChart').getContext('2d'); // 2d context
var ctx = $('#myChart'); // jQuery instance
var ctx = 'myChart'; // element id

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

  • Gute Antwort! Vielen Dank!

    – Unbekannt

    21. April 2021 um 12:58 Uhr

  • Ein weiterer Grund dafür könnte sein, dass Sie Skript vor Ihrem Canvas-Tag eingefügt haben, fügen Sie Skripte hinzu, nachdem Sie das Canvas-HTML-Tag hinzugefügt haben.

    – Yuvraj Mudaliar

    5. Juli 2021 um 16:35 Uhr


Ich bin ein bisschen spät dran, aber wenn andere Entwickler diesen Beitrag erreichen, stellen Sie sicher, dass Sie nicht auf Dokument oder Fenster verweisen. Das Angle-Team empfiehlt nicht, direkt auf die dom-Variable zuzugreifen. Verwenden ElementRef stattdessen

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 wie von @mavroprovato vorgeschlagen

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

  • Sieht so aus, als ob querySelector die auswählt Elternteil Element des Diagramms. dh: <div #myCanvas> <canvas id="canvas">{{ chart }}</canvas> </div>

    – SchießenBlanks

    25. Mai 2018 um 0:30 Uhr


Außerdem muss das Java-Skript nach der Deklaration der Leinwand stehen.

Hatte dieser Fehler die Ursache, dass ich versuchte, das Diagramm einzustellen Konstrukteur Anstatt von ngAfterContentInit

Ich persönlich habe kein Problem damit, das zu geben Leinwand-ID als String für den Kontext

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

Benutzeravatar von Yene Mulatus
Yene Mulatu

Sie können verwenden

fügen Sie dies in Ihre Vorlage ein
<canvas #myCanvas width="500" height="300"></canvas>

Fügen Sie dies Ihrer Komponente hinzu

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

Wenn Sie bereit sind, rufen Sie dies an

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

Ich verwende Chart.JS mit Angular 9.

Dies geschieht normalerweise, wenn eine ID-Nichtübereinstimmung mit der Instanziierung des Diagramms vorliegt. Stellen Sie sicher, dass Sie ein ID-Attribut haben canvas Element wie dieses –

<canvas id="myCanvasId">{{ myChart }}</canvas>

und Sie haben dies beim Instanziieren des Diagramms korrekt –

this.myChart = new Chart('myCanvasId', {
....
}

Auf einem anderen Bildschirm hatte ich das gleiche Problem aufgrund der Anwesenheit von *ngIf auf dem übergeordneten Element von <canvas>.

Um dies zu überwinden, können Sie entweder die entfernen *ngIf vom übergeordneten Element oder initialisieren Sie die Diagrammvariable am Anfang mit einem leeren Array – myChart: [].

1430870cookie-checkchart.js Diagramm konnte nicht erstellt werden: Kontext aus dem angegebenen Element kann nicht abgerufen werden

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy