javascript - Vis.js 时间轴出现 polymer 错误 : Something is wrong with the Timeline scale

Question

我想使用 polymer 和 vis.js 时间线创建时间线 Web 组件。

polymer 元素代码

<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>

当我尝试使用它时。

<legacy-element></legacy-element>

它给了我以下错误。

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

我已经尝试了 vis's github issues 中提供的所有解决方案

但是，没有成功!需要帮助。

Answer 1

您需要将加载外部样式表的链接放在 <template> 内。

<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>

Note: Loading external stylesheets is now deprecated in favor of style modules. It is still supported, but support will be removed in the future.

或者，你可以这样做:

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

而不是

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

外部<template> .

Demo