流星上的vis-timeline不渲染

Question

我试图在我的Meteor应用程序上正确使用vis-timeline库，但它不能渲染。

这是我的.html文件

<template name="kk">
<div class="ui huge segment" id="visualization">
</div>

​

这是我的.js

import { Timeline, DataSet } from 'vis-timeline';

Template.kk.onRendered(() => {
  const container = $('#visualization');
  const items = new DataSet([
    { id: 1, content: 'item 1', start: '2014-04-20' },
    { id: 2, content: 'item 2', start: '2014-04-14' },
    { id: 3, content: 'item 3', start: '2014-04-18' },
    {
      id: 4, content: 'item 4', start: '2014-04-16', end: '2014-04-19',
    },
    { id: 5, content: 'item 5', start: '2014-04-25' },
    {
      id: 6, content: 'item 6', start: '2014-04-27', type: 'point',
    },
  ]);
  const options = {
    width: '100%',
    height: '30px',
    margin: {
      item: 20,
    },
  };
  const tl = new Timeline(container[0], items, options);
  console.log('tl');
  console.log(tl);
});

而我得到的是this。

你知道为什么它没有被正确渲染吗？

感谢你的帮助

Answer 1

问题解决了。正如Mikkel所说，这是一个CSS问题。

我粘贴.js代码给你，包括导入。

import { Timeline, DataSet } from 'vis-timeline';
import 'vis-timeline/lib/timeline/component/css/animation.css';
import 'vis-timeline/lib/timeline/component/css/currenttime.css';
import 'vis-timeline/lib/timeline/component/css/customtime.css';
import 'vis-timeline/lib/timeline/component/css/dataaxis.css';
import 'vis-timeline/lib/timeline/component/css/item.css';
import 'vis-timeline/lib/timeline/component/css/itemset.css';
import 'vis-timeline/lib/timeline/component/css/labelset.css';
import 'vis-timeline/lib/timeline/component/css/panel.css';
import 'vis-timeline/lib/timeline/component/css/pathStyles.css';
import 'vis-timeline/lib/timeline/component/css/timeaxis.css';
import 'vis-timeline/lib/timeline/component/css/timeline.css';

Template.kk.onRendered(() => {
  const container = $('#visualization');
  const items = new DataSet([
    { id: 1, content: 'item 1', start: '2014-04-20' },
    { id: 2, content: 'item 2', start: '2014-04-14' },
    { id: 3, content: 'item 3', start: '2014-04-18' },
    {
      id: 4, content: 'item 4', start: '2014-04-16', end: '2014-04-19',
    },
    { id: 5, content: 'item 5', start: '2014-04-25' },
    {
      id: 6, content: 'item 6', start: '2014-04-27', type: 'point',
    },
  ]);
  const options = {};
  const tl = new Timeline(container[0], items, options);
  console.log('tl');
  console.log(tl);
});

谢谢你的帮助！