聚合物錯誤Vis.js時間軸：時間軸刻度錯誤

Question

我想使用polymer和vis.js時間軸創建時間軸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> 

當試圖使用它。

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

注：加載外部樣式現在已經過時，有利於style modules。它仍然受支持，但將來在 將刪除支持。

或者，你可以這樣做：

<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