1

我正在尝试将 vis.js 库包含到我的 Meteor 应用程序中。我包含了该库，并且正在无错误地渲染页面，但是，vis.js 时间轴仅使用水平线进行渲染，而没有对象。

我肯定会填充我的数据集，因为我已经通过控制台确认了它。

这是我的代码。

Template.events_timeline.rendered = function () {
  drawTimeline();
};

function drawTimeline(){
  var container = document.getElementById('timeline');
  var event = Events.find();

  if (event.count() === 0) {
    console.log('found no events');
    return;
  }
  data = new vis.DataSet({
    type: { start: 'ISODate', end: 'ISODate' }
  });

  var i = 1;
  event.forEach(function (ev) {
    data.add([{id: i, content: ev.content, start: ev.startDate, end: ev.endDate}]);
    i++;
  });

  // Configuration for the Timeline
  var options = {};

  // Create a Timeline
  var timeline = new vis.Timeline(container, data, options);
}

我的模板如下。很基础。

<template name="events_timeline">
  <div id="timeline"></div>
</template>

结果。 http://i.imgur.com/k2HyQb5.jpg

通过上面的代码和对路由器的一些更改，我能够让图表用它自己的数据呈现，但是当将图表模板嵌入到例如布局模板中时，我似乎无法让图表工作。

以下路由器更改使用来自事件集合的数据正确呈现图表。

this.route('events_timeline', {
    path: '/timeline',
    waitOn: function() {
      return Meteor.subscribe('events');
    },
    notFoundTemplate:'data_not_found',
    action: function() {
      if(this.ready()) {
        this.setLayout('events_timeline');
        this.render();
      } else {
        this.setLayout('loading');
        this.render('loading');
      }
    }
  });

如果我换...

this.setLayout('events_timeline');

... 和 ...

this.setLayout('layout');

...然后我仍然得到空白图表。

我想我在如何正确等待特定模板的数据方面遗漏了一些东西。

4

0 回答 0