流星图中的chart.js没有从上下文中提取数据

时间:2015-03-27 05:15:26

标签: meteor charts iron-router chart.js

回答自己:问题(其中一个问题)似乎是我期待一系列数字,我在集合中所拥有的是一个包含数字的数组...所以数组需要被解析为隔离我正在寻找的数据。一旦我得到了一系列数字,事情变得容易多了。

这里是从数组中删除正确字段然后处理它以便可以使用它的代码:

    var lvl_min_raw  = _.compact(_.pluck(EDC_DATA.find({session_id: Session.get("current_session_id")},{fields: {lvl_min: 1}}).fetch(),'lvl_min'));
    var lvl_min_ints =  _.map(lvl_min_raw.map(Number), function(num){ return num - 256; });


    var lvl_max_raw  = _.compact(_.pluck(EDC_DATA.find({session_id: Session.get("current_session_id")},{fields: {lvl_max: 1}}).fetch(), 'lvl_max'));
    var lvl_max_ints = _.map(lvl_max_raw.map(Number), function(num){ return num - 256; });

    var lvl_avg_raw  = _.compact(_.pluck(EDC_DATA.find({session_id: Session.get("current_session_id")},{fields: {lvl_avg: 1}}).fetch(), 'lvl_avg'));
    var lvl_avg_ints = _.map(lvl_avg_raw.map(Number), function(num){ return num - 256; });

    var lvl_median_raw  = _.compact(_.pluck(EDC_DATA.find({session_id: Session.get("current_session_id")},{fields: {lvl_median: 1}}).fetch(), 'lvl_median'));
    var lvl_median_ints = _.map(lvl_median_raw.map(Number), function(num){ return num - 256; });

    var  label_array_length = lvl_median_ints.length; 
    var lvl_labels_raw = Array.apply(null, {length: label_array_length}).map(Number.call, Number)
    var lvl_labels_short = _.map(lvl_labels_raw.map(String), function(str){ return str; });

工作代码在这里:https://github.com/amstanley/ddt以防其他人遇到此问题。希望它有所帮助。

=============================================== ==================

我正在将遥控器从一堆WiFi设备加载到mongo数据库中,并希望实时显示各个设备的指标,以便我可以解决信号级别和其他问题。为此,我设置了一个简单的流星应用程序来访问数据。我现在正试图在meteor中使用chart.js来提供实时图表。

我正在排除故障的问题是我可以实时显示任何wifi会话的列表数据,但我似乎无法使用相同的数据填充图表。我相当肯定这是一个上下文问题,但是经过8小时左右的谷歌搜索,我不明白如何正确访问上下文来填充数据。

实际错误是:

  

Tracker afterFlush函数的异常:undefined不是函数(评估'new Chart(lvlCtx).line(data)')

路由器看起来像这样:

   Router.configure({
      layoutTemplate: 'layout',
      loadingTemplate: 'loading',
      waitOn: function() { return Meteor.subscribe('Edc_Data'); },

    });

    Router.route('/', {
                name: 'activityList'
                });

    Router.route('/:session_id', {
                name: 'sessionPage',
                data: function() { return EDC_DATA.find({session_id: this.params.session_id},{sort: {_id: -1}}); }


    });

模板如下所示:

    <template name="sessionPage">

    <div class="navbar-header">
    Path: /session_id
  </div>

  WiFi Levels:
   <div> <canvas id="lvlChart" width="400" height="400"> </canvas> </div>

  Raw Data  
  <div>
  {{#each this}}  
     <p> {{household_id}} | {{time}} | {{session_id}} | {{lvl_min}} | {{lvl_max}} | {{lvl_avg}} | {{lvl_median}} | {{lvl_stddev}}</p>
  {{/each}}

  </div>
</template>

图表功能如下所示:

function drawChart(){        

        var data = {

          labels: this.time,

          datasets: [       

            {
                label: "lvl_min",
                data: this.lvl_min,
                color:"#F38630"
            },
            {
                label: "lvl_max",
                data:  this.lvl_max,
                color : "#E0E4CC"
            },
            {
                label: "lvl_avg",
                data:  this.lvl_avg,
                color : "#69D2E7"
            },          
            {
                label: "lvl_median",
                data: this.lvl_median,
                color : "green"
            },
            {
                label: "lvl_stddev",
                data: this.lvl_stddev,
                color : "red"
            }      
        ]
        };

          var lvlCtx = $("#lvlChart").get(0).getContext("2d");
          var lvlChart = new Chart(lvlCtx);
          new Chart(lvlCtx).line(data);

}

自动运行如下:

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

当我加载页面时,错误“来自Tracker afterFlush函数的异常:undefined不是函数(评估'新图表(lvlCtx).line(数据)')”将显示在错误控制台中。该模板将在画布下方的页面上的{{#each this}} ... {{/ each}}块中呈现项目。从这里我推断出上下文被传递给模板,但不是传递给图表函数,因此数据:字段没有填充,导致错误。

如何访问图表功能中的上下文,以便正确填充数据参数?非常感谢任何帮助。

0 个答案:

没有答案