Chart.jsで作成されたドーナツチャートが表示されないのはなぜですか？

Question

私はChart.jsでいくつかのチャートを作成しました。それらは私のウェブサイトにあります[http://projetoplenario.com/proposicoes.html]。私は私のウェブサイトの他のHTMLページに同じチャートを挿入しようとしましたが、うまくいきません。

たとえば、proposicoes.htmlの最初のチャートを考えてみましょう。それは "reformaTrabalhistaChart"という名前です。 reformaTrabalhista.html [http://projetoplenario.com/reformaTrabalhista.html]には、チャートを挿入するコードもあります。

しかし、なぜ私はreformaTrabalhista.htmlで動作しないし、proposicoes.htmlで動作します。

reformaTrabalhista.htmlに同じチャートを挿入するにはどうすればよいですか？

<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

あなたが取得しようとしているためでありますその他のキャンバス要素は、reformaTrabalhista.htmlには存在しません。

あなたがより良いそうのように、すべてのキャンバスのために、キャンバス年代コンテキストを取得する必要があります：

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

そのように、グラフのインスタンスを定義します。ここでは

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

が変更されましたバージョンmycharts.js - https://kopy.io/0HiRj