Как передать данные в коллекции для Chart JS в Meteor - PullRequest
Новая
       11

Как передать данные в коллекции для Chart JS в Meteor

0 голосов
/ 07 апреля 2020

Я хотел бы использовать помощников для получения нужных данных из коллекций и загрузки этих данных в диаграмму (диаграмма. js). Теперь я не знаю, как правильно определить и передать эти данные от помощников к обработчику, так как я получил эти две ошибки: Exception from Tracker afterFlush function: и ReferenceError: data is not defined

import './visual.html';
import { subject,student,record } from '../../lib/collections/collection.js';
import { Chart } from 'chart.js';
import { Template } from 'meteor/templating';

Template.charts.helpers({
  charts:function(){
//To get the attendance rate for each student who has been attended classes
    var studentIDList =[];
    var studentArray = [];
    var numOfStudent = student.find().count();
    var studentDoc = student.find().fetch();

    for(let i = 0; i<numOfStudent; i++){
      studentIDList.push(studentDoc[i].studentID);
    }

    for(let x = 0; x<numOfStudent; x++){
      let item = studentIDList[ x ],
          exist = record.findOne({studentID:item});
      if(!exist){
        //console.log("Student record not found");
      }else{
        studentArray.push(item);

      }
    }
    var data =[];
    for(let x = 0;x<studentArray.length; x++){
      let totalRecord = record.find({studentID:studentArray[x]}).count(),
          attend = record.find({studentID:studentArray[x],attendance:true}).count(),
          rate = attend/totalRecord;
      data.push({
        x:studentArray[x],
        y:rate
      });
    }
    return data;
  }

Template.charts.onRendered(function () {
  console.log("The Bar Chart is rendered")
  let ctx = $("#myChart");
  this.autorun(() => {
    let myBarChart = new Chart(ctx, {
      type   : 'bar',
      data   : data,
      options: barChartOptions
  });
});

});
});

HTML

<template name="charts">
  <div style="width:800px; height:500px;">
    <canvas id="myChart"></canvas>
  </div>
</template>

Данные, которые я хочу передать, выглядят так: enter image description here

...