Warum erscheint mein mit Chart.js erstelltes Donut-Diagramm nicht?

Question

Ich habe einige Diagramme mit Chart.js erstellt und sie sind auf meiner Website [http://projetoplenario.com/proposicoes.html]. Ich habe versucht, das gleiche Diagramm auf andere HTML-Seite meiner Website einzufügen, aber es funktioniert nicht.

Betrachten wir zum Beispiel das erste Diagramm von proposicoes.html. Es heißt "reformaTrabalhistaChart". Auf reformaTrabalhista.html [http://projetoplenario.com/reformaTrabalhista.html] gibt es auch diesen Code, um das Diagramm einzufügen.

Aber ich weiß nicht warum, es funktioniert nicht auf reformaTrabalhista.html und funktioniert auf proposicoes.html.

Wie kann ich das gleiche Diagramm auf reformaTrabalhista.html einfügen?

<div class="boxChart"> 
 
    <a href="reformaTrabalhista.html"> 
 
    <canvas id="reformaTrabalhistaChart"></canvas> 
 
    </a> 
 
</div>

<div class="boxChart"> 
 
    <canvas id="reformaTrabalhistaChart"></canvas> 
 
</div>

var reformaTrabalhistaChart; 
 
var data = [ 
 
    { 
 
    value: 50, 
 
    color: "green" 
 
    }, { 
 
    value: 26, 
 
    color: "red" 
 
    }, { 
 
    value: 1, 
 
    color: "orange" 
 
    }, { 
 
    value: 1, 
 
    color: "purple" 
 
    }, { 
 
    value: 3, 
 
    color: "gray" 
 
    } 
 
]; 
 

 
var options = { 
 
    animation: true, 
 
    animationEasing: 'easeInOutQuart', 
 
    animationSteps: 80 
 
}; 
 

 
//Get the context of the canvas element we want to select 
 
var ctx = document.getElementById("reformaTrabalhistaChart") 
 
        .getContext("2d"); 
 

 
reformaTrabalhistaChart = new Chart(ctx).Doughnut(data, options);

Answer 1

Dies liegt daran, dass Sie versuchen, zu erhalten andere Canvas-Elemente, die nicht in reformaTrabalhista.html.

Sie sollten besser Leinwand ‚s erhalten Zusammenhang für alle Leinwände, etwa so:

var canvas = document.getElementById("canvas-id-here"); 
var ctx = canvas && canvas.getContext("2d"); 

und das Diagramm Instanz definieren, wie zum Beispiel:

chart-variable-name = ctx && new Chart(ctx).Doughnut(data, options); 

Hier ist die modifizierte Version mycharts.js - https://kopy.io/0HiRj