从可视时间线中删除边框/轮廓
从可视时间线中删除边框/轮廓
提问于 2020-08-25 16:21:56
我在Vis-Timeline上有非常简单的时间线测试。有没有办法摆脱时间线的轮廓？
正如您在代码中看到的，css中有边框，但这是外部边框。我说的是图表的轮廓。
<!doctype html>
<html>
<head>
<title>Timeline</title>
<script type="text/javascript" src="https://unpkg.com/vis-timeline@latest/standalone/umd/vis-timeline-graph2d.min.js"></script>
<link href="https://unpkg.com/vis-timeline@latest/styles/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#visualization {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
</style>
</head>
<body>
<div id="visualization"></div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var Container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
{ id: 1, content: 'item 1', start: '2014-04-20 11:10:01' },
{ id: 2, content: 'item 2', start: '2014-04-20 11:10:02' },
{ id: 3, content: 'item 2', start: '2014-04-20 11:11:02' },
{ id: 4, content: 'item 2', start: '2014-04-20 11:13:02' },
{ id: 5, content: 'item 2', start: '2014-04-20 11:14:02' },
{ id: 6, content: 'item 2', start: '2014-04-20 11:15:02' },
]);
// Configuration for the Timeline
var options = {};
// Create a Timeline
var timeline = new vis.Timeline(Container, items, options);
</script>
</body>
<footer>
<style>
.vis-timeline {
outline: none;
}
</style>
</footer>
</html>
这样我就可以删除：
#visualization {
width: 600px;
height: 400px;
/* border: 1px solid lightgray; */
}但这只会删除外部边界。
我尝试使用类似的方法来解决我在vis.js中遇到的一个问题：Vis-Network.js suppress border from showing up
.vis-timeline {
outline: none;
}但它什么也做不了--也许我用错了类，但我尝试了不同的类，没有做任何改变。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-08-25 16:31:37
您可以看到.vis-timeline元素有一个边框：
.vis-timeline {
border: 1px solid #bfbfbf;
...因此，您只需将border: none !important;设置为此.vis-timeline元素：
.vis-timeline {
border: none !important;
}<!doctype html>
<html>
<head>
<title>Timeline</title>
<script type="text/javascript" src="https://unpkg.com/vis-timeline@latest/standalone/umd/vis-timeline-graph2d.min.js"></script>
<link href="https://unpkg.com/vis-timeline@latest/styles/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#visualization {
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<div id="visualization"></div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var Container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
{ id: 1, content: 'item 1', start: '2014-04-20 11:10:01' },
{ id: 2, content: 'item 2', start: '2014-04-20 11:10:02' },
{ id: 3, content: 'item 2', start: '2014-04-20 11:11:02' },
{ id: 4, content: 'item 2', start: '2014-04-20 11:13:02' },
{ id: 5, content: 'item 2', start: '2014-04-20 11:14:02' },
{ id: 6, content: 'item 2', start: '2014-04-20 11:15:02' },
]);
// Configuration for the Timeline
var options = {};
// Create a Timeline
var timeline = new vis.Timeline(Container, items, options);
</script>
</body>
<footer>
<style>
.vis-timeline {
outline: none;
}
</style>
</footer>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63574812
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号