时间戳

首页 > 解决方案 > 流星上的时间线不渲染

javascript - 流星上的时间线不渲染

问题描述

我正在尝试在我的 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);
});

这就是我得到的。

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

谢谢你的帮助

标签： javascriptmeteor

解决方案

问题解决了。正如 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);
});

谢谢您的帮助！

推荐阅读