Mein Diagramm wird nicht auf dem Browser-Bildschirm mit chart.js in Meteor angezeigt

Question

Mein Diagramm wird nicht im Browser-Bildschirm angezeigt. Ich benutze chart.js mit meteor und versuche es auch mit onRendered oder onCreated, aber es hat nicht für mich funktioniert.

Hier ist mein Code

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

Js Datei ->

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); 
} 
} 

Hause meine Vorlagennamen

Answer 1

Wenn Sie Konsolprotokoll ‚$ ist (“ #myChart "). get (0) 'das bringt dich zurück und efined, weil bei rendered Ihr get (0) nicht initialisiert wird. Um dies zu verhindern, müssen Sie einen Callback hinzufügen, wenn Sie Ihr Diagramm initialisiert haben. Dein get (0) wird zuerst initialisiert, dann kannst du deine Chats erstellen.

'$ ("# myChart"). Get (0)' ist keine reative Sache, daher wird Ihre Ansicht nicht neu initialisiert. Hier

ist der Arbeitscode:

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); 
     } 
    }) 
}