2017-01-23 6 views
0

Я пытаюсь нарисовать диаграмму, используя chart.js. Я могу заставить диаграмму отображаться с использованием onRendered, когда я использую статические числа, однако, когда я пытаюсь создать переменную, захватывая данные из коллекции, переменная return undefined. Я предполагаю, что это проблема порядка загрузки.findOne возвращает undefined in onRendered

Template.communication.onRendered(function() { 
    // Get the context of the canvas element we want to select 
    var ctx = document.getElementById("myChart").getContext("2d"); 

    // get user data for charts 
    var id = FlowRouter.getParam('id'); 
    var user = ProfessionalOverview.findOne({"candidateUserId": id}); 
    var communicationSkills = user && user.communicationSkills; 

    // Set the data 
    var data = { 
    labels: ["Communication skills"], 
    datasets: [ 
     { 
     data: [communicationSkills, 2], 
     backgroundColor: [ 
      "#FF6384", 
      "#F2F2F2", 
     ] 
     }] 
    }; 

    // And for a doughnut chart 
    var myDoughnutChart = new Chart(ctx, { 
     type: 'doughnut', 
     data: data, 
     options: { 
     cutoutPercentage: 50, 
     tooltips: false, 
     legend: { 
      labels:{ 
      display: true, 
      boxWidth: 0 
      }, 
      onClick: (e) => e.stopPropagation(), 
     }, 
     animation:{ 
      animateRotate: true, 
      render: false, 
     }, 
     } 
    }); 

    }); 

ответ

2

у вас есть состояние гонки, я бы назвал его. вы не показываете, где у вас есть ваша подписка, я предполагаю, что она находится в onCreated(). если да, да, нет гарантии, что данные будут готовы, когда вы найдете свою находку.

типичное решение обернуть находку в авторан, как это:

this.autorun(function() { 
    var user = ProfessionalOverview.findOne({"candidateUserId": id}); 

    if (user) { 
     // rest of the code that uses this data 
    } 
}); 

Вы также можете использовать коллекцию isReady Callback для той же

this.autorun(function() { 
    if (ProfessionalOverview.isReady()) { 
     var user = ProfessionalOverview.findOne({"candidateUserId": id}); 
     // rest of the code that uses this data 
    } 
}); 

, защищая его с «если» , вы не будете заниматься какой-либо работой до тех пор, пока не появятся данные.