vis时间线不可见

Question

我正在尝试初始化一个签证图表。我正在使用测试数据。

var container = document.querySelector('#chart')
var items = new vis.DataSet([
  {
    start: new Date(2010, 7, 15),
    end: new Date(2010, 8, 2),  // end is optional
    content: 'Test A'
  }
])
let options = {
  width: '100%',
  height: '200px',
 }
 this.timeline = new vis.Timeline(container, items, options)
 console.log(this.timeline)

图表似乎是信息化的，但渲染时没有显示任何内容。我已经通过npm安装了模块，我也需要导入css吗？

Answer 1

我也需要导入css吗？

是的，您可以使用CDN链接：

https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis-timeline-graph2d.min.css

或者由于您使用的是NPM，从源导入，例如，通过使用vis/dist/vis.min.css

工作演示：

​

var container = document.querySelector('#chart');
var items = new vis.DataSet([
    {
        start: new Date(2010, 7, 15),
        end: new Date(2010, 8, 2),  // end is optional
        content: 'Test A'
    }
]);

let options = {
    width: '100%',
    height: '200px'
}

this.timeline = new vis.Timeline(container, items, options)

<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis-timeline-graph2d.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js" rel="script"></script>


<div id="chart"></div>

​