Question

我正在尝试将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

我能够通过上面的代码以及对路由器的一些更改来使用自己的数据来渲染图形，但是在嵌入图表模板时，我似乎无法使图表工作，例如，布局模板。

以下路由器更改会使用Events集合中的数据正确呈现图表。

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');

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

我想我错过了如何正确等待特定模板的数据。

Vis.js时间轴无法在Meteor.js应用程序中呈现

0 个答案: