流星更新流动图答案

【问题标题】：Meteor update flot chart流星更新流动图
【发布时间】：2014-05-31 14:27:51
【问题描述】：

当使用Meteor 0.8.0时，当新数据到达时如何更新flot图表？我查看了Meteor-flot 的示例，但它正在通过页面上的计时器使用假数据进行更新。而不是来自集合的反应性数据。

到目前为止，我有类似的东西：

// returns an object with a label and an array of timestamp, value
// like { label:'test', data:[[1397605016000, 1332],[1397605616000,1356],[1397606216000,1380]]}
Template.example.helpers({
  readings: function(){
    DataReadings.find();
  }
});

Template.example.rendered = function() {
  $.plot ($("#flot"), [this.data.data], {
    series: {
      lines: {
        show: true
      },
      points: {
        show: true
      }
    },
    xaxis: {
      mode: 'time',
      timeformat: '%H:%M'
    }
  });
};

这对于初始渲染非常有用，但不确定如何在新数据到达后更新图表，大约每五分钟一次。那么当新数据到来时如何调用 plot.setData(newData) & plot.draw() 呢？

【问题讨论】：

看看 Deps 包 - 或 Tracker (meteor 0.9)

标签： javascript meteor meteor-blaze

【解决方案1】：

一种方法是使用游标/集合观察器。我在我的 Meteor 应用程序中使用这种方法来更新 Flot 图表，效果很好。

在Template.example.rendered 函数中创建初始绘图后，添加一个光标观察器，在集合中添加（或删除）新文档时更新您的图表：

//  Subscribe to collection (or no need to do this if it's already done on your route)
Meteor.subscribe('dataReadings', someFilterVarOrNot);

//  Add a cursor observer for all documents added with a date greater 
//  than right now (uses moment.js)
//  (If you don't do this, you'll get an "added" fire for every document 
//  that's ALREADY been added - not sure why it does this but it does
dataReadingsObserveHandle = DataReadings.find({
  createdAt: {$gte: moment().toDate()}}).observe({

    //  Fires anytime a new document is added
    added: function(dataReading) {
      $('#flot').data("plot").setData(dataReading.data);
      $('#flot').data("plot").draw();

      //  Or setup whatever query/calculation you need to assemble a 
      //  new data set for your chart, there are also some other observers like
      //  observeChanges() which let you see how a document has changed versus
      //  being added or removed
    },

    //  Fires anytime a document is removed
    removed: function(removedDataReading) {
      //  Update and redraw chart like above...
  }
});

dataReadingsObserveHandle 是故意全局的，因此您可以稍后将其销毁，因为显然收集观察者是服务器密集型的。如果您可以在需要销毁的任何地方访问它，则它不一定必须是全局的：

//  Once your chart no longer needs to be updated call...
dataReadingsObserveHandle.stop();
dataReadingsObserveHandle = null;

我相信当用户导航到不同的模板并且不再查看您的图表时，观察者会自动被破坏。请参阅http://docs.meteor.com/#observe 了解更多信息。

我很想听听使用ReactiveVar 或Deps.dependency 的其他方法。特别是如果他们更高效

【讨论】：

【解决方案2】：

我尝试了这种方法。不是很完美，很简洁

<template name="data">
<li> A : {{ A }}, B : {{ B }}
 <div id="ph_{{A}}_{{B}}" style="width:100%;height:100px;" ></div>
 {{ PlotMe this }}
</li>
</template>

和

Handlebars.registerHelper("PlotMe", function(element) {

  setTimeout( function() 
  {
    $.plot( "#ph_"+ element.A+"_"+element.B , [element.data] ,
    {xaxis: {mode: "time", },yaxis: {min: 0, }});
    } , 1 );
});

setTimeout 可以避免 Flot 关于 div 尺寸无效的错误，因为尚未渲染。使用新数据更新浮点数。

【讨论】：