我尝试在 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这就是我得到的。
知道为什么它没有正确渲染吗?
感谢您的帮助
最佳答案
问题已解决。正如 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);
});
感谢您的帮助!
关于javascript - meteor 上的 vis-timeline 不渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58872208/