从可见时间线上删除边框/轮廓

编程问答 2022-08-14

问题描述

我在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,start: '2014-04-20 11:11:02' },{ id: 4,start: '2014-04-20 11:13:02' },{ id: 5,start: '2014-04-20 11:14:02' },{ id: 6,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>

enter image description here

所以我可以删除：

#visualization {
    width: 600px;
    height: 400px;
    /* border: 1px solid lightgray; */
}

但这只会删除外部边框。

我尝试使用类似的方法来解决vis.js遇到的问题：Vis-Network.js suppress border from showing up 

.vis-timeline {
    outline: none;
}

但是它什么也没做-也许我使用的是错误的类，但是我尝试了没有变化的其他类。

解决方法

您会看到.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,start: '2014-04-20 11:11:02' },{ id: 4,start: '2014-04-20 11:13:02' },{ id: 5,start: '2014-04-20 11:14:02' },{ id: 6,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>

htmljavascriptvis.js