流星の中のchart.jsを使って私のグラフがブラウザ画面に表示されない

Question

私のチャットはブラウザの画面に表示されません。私は流星とchart.jsを使用してもonRenderedまたはonCreatedでそれをやろうとしているが、それは私のために働いていない。あなたは「（$」ログコンソールの場合>

Template.home.rendered = function() { 
Deps.autorun(function() { drawChart(); }); 
}; 


function drawChart() { 
var oldCount = 2; 
var newCount = 4; 
var data = [{ 
    value: newCount, 
    color: "#e53935", 
    highlight: "#c62828", 
    label: "New" 
}, { 
    value: oldCount, 
    color: "#3949ab", 
    highlight: "#1a237e", 
    label: "Regular" 
}]; 

var pieOptions = { 
    animation: false, 
} 
if ($("#myChart").get(0)) { 
    var ctx = $("#myChart").get(0).getContext("2d"); 
    var myNewChart = new Chart(ctx); 

    new Chart(ctx).Pie(data, pieOptions); 
} 
} 

家は私のテンプレート名

Answer 1

である - ここで

は

<div class="pie-canvas"> 
        <canvas id="myChart" width="350" height="350"></canvas> 
       </div> 

JSファイル私のコードです#myChart "）。get（0） 'これはあなたとあなたを返すレンダリング時にget（0）が初期化されていないため、これを防ぐには、グラフを初期化したときにコールバックを追加する必要があります。だから、あなたのget（0）が最初に初期化され、チャットを作成することができます。

'$（ "＃myChart"）。get（0）'は参考にならないため、ビューは再初期化されません。ここで

は、作業コードです：

function drawChart() { 
    var oldCount = 2; 
    var newCount = 4; 
    var data = [{ 
     value: newCount, 
     color: "#e53935", 
     highlight: "#c62828", 
     label: "New" 
    }, { 
     value: oldCount, 
     color: "#3949ab", 
     highlight: "#1a237e", 
     label: "Regular" 
    }]; 

    var pieOptions = { 
     animation: false, 
    } 
    // Added a callback here. 
    setTimeout(function(){ 
     if ($("#myChart").get(0)) { 
      var ctx = $("#myChart").get(0).getContext("2d"); 
      var myNewChart = new Chart(ctx); 
      console.log(myNewChart); 
      new Chart(ctx).Pie(data, pieOptions); 
     } 
    }) 
}