Javascript Vis.js timeline with polymer error：timeline scale有问题

我想使用

polymer

和

vis.js

timeline创建timeline web组件

高分子元件代码

<template>
    <div id="visualization" style="height: 100%;width: 100%;border: 1px solid black"></div>
</template>
<link href="http://visjs.org/dist/vis.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.18.0/vis.js"></script>
<script>
    // register an element
    MyElement = Polymer({

        is: 'legacy-element',

        ready: function () {
            const container = this.$.visualization;

            const items = new vis.DataSet({
                type: {start: 'ISODate', end: 'ISODate'}
            });

            items.add([
                {id: 1, content: 'item 1<br>start', start: '2014-01-23'},
                {id: 2, content: 'item 2', start: '2014-01-18'},
                {id: 3, content: 'item 3', start: '2014-01-21'},
                {id: 4, content: 'item 4', start: '2014-01-19', end: '2014-01-24'},
                {id: 5, content: 'item 5', start: '2014-01-28', type: 'point'},
                {id: 6, content: 'item 6', start: '2014-01-26'}
            ]);

            const options = {
                width: '500px',
                height: '300px',
            };

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

        }
    });
</script>

我已经尝试了所有可能的解决方案，其中提供了

---

但是，没有成功！所需帮助。

您需要将加载外部样式表的链接放入

中

<dom-module id="legacy-element">

  <template>

    <link href="http://visjs.org/dist/vis.css" rel="stylesheet" type="text/css">

    <div id="visualization" style="height: 100%;width: 100%;border: 1px solid black"></div>
  </template>

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

  <script>
    // register an element
    MyElement = Polymer({

      is: 'legacy-element',

      ready: function() {
        const container = this.$.visualization;

        const items = new vis.DataSet({
          type: {
            start: 'ISODate',
            end: 'ISODate'
          }
        });

        items.add([{
          id: 1,
          content: 'item 1<br>start',
          start: '2014-01-23'
        }, {
          id: 2,
          content: 'item 2',
          start: '2014-01-18'
        }, {
          id: 3,
          content: 'item 3',
          start: '2014-01-21'
        }, {
          id: 4,
          content: 'item 4',
          start: '2014-01-19',
          end: '2014-01-24'
        }, {
          id: 5,
          content: 'item 5',
          start: '2014-01-28',
          type: 'point'
        }, {
          id: 6,
          content: 'item 6',
          start: '2014-01-26'
        }]);

        const options = {
          width: '500px',
          height: '300px',
        };

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

      }
    });
  </script>
</dom-module>

//注册一个元素
MyElement=聚合物({
是：'遗留元素'，
就绪：函数（）{
const container=this.$.visualization；
const items=new vis.DataSet({
类型：{
开始日期：'ISODate'，
结束：'等日期'
}
});
items.add([{
id:1，
内容：“项目1
开始”，
开始：“2014-01-23”
}, {
id:2，
内容：“项目2”，
开始：“2014-01-18”
}, {
id:3，
内容：“项目3”，
开始：“2014-01-21”
}, {
id:4，
内容：“项目4”，
开始：“2014-01-19”，
完：2014-01-24
}, {
id:5，
内容：“项目5”，
开始：“2014-01-28”，
类型：“点”
}, {
id:6，
内容：“项目6”，
开始：“2014-01-26”
}]);
常量选项={
宽度：“500px”，
高度：“300px”，
};
this.timeline=新的可视时间线（容器、项目、选项）；
}
});

注意：现在不推荐加载外部样式表，而支持。它仍受支持，但将在中删除支持 未来

或者，您可以执行以下操作：

而不是

外部

Something is wrong with the Timeline scale. Limited drawing of grid lines to 1000 lines.

<dom-module id="legacy-element">

  <template>

    <link href="http://visjs.org/dist/vis.css" rel="stylesheet" type="text/css">

    <div id="visualization" style="height: 100%;width: 100%;border: 1px solid black"></div>
  </template>

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

  <script>
    // register an element
    MyElement = Polymer({

      is: 'legacy-element',

      ready: function() {
        const container = this.$.visualization;

        const items = new vis.DataSet({
          type: {
            start: 'ISODate',
            end: 'ISODate'
          }
        });

        items.add([{
          id: 1,
          content: 'item 1<br>start',
          start: '2014-01-23'
        }, {
          id: 2,
          content: 'item 2',
          start: '2014-01-18'
        }, {
          id: 3,
          content: 'item 3',
          start: '2014-01-21'
        }, {
          id: 4,
          content: 'item 4',
          start: '2014-01-19',
          end: '2014-01-24'
        }, {
          id: 5,
          content: 'item 5',
          start: '2014-01-28',
          type: 'point'
        }, {
          id: 6,
          content: 'item 6',
          start: '2014-01-26'
        }]);

        const options = {
          width: '500px',
          height: '300px',
        };

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

      }
    });
  </script>
</dom-module>