从 vis-timeline 中删除 border/outline

Question

我在 Vis-Timeline 上有非常简单的时间线测试。有什么办法去掉时间线的Outline吗？

如您在代码中所见，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-timeline {
    outline: none;
}

但它没有任何作用 - 也许我用错了 class，但我尝试了不同的 classes 没有任何变化。

Answer 1

可以看到.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>

从 vis-timeline 中删除 border/outline

Remove border/outline from vis-timeline

html

javascript

css

vis.js