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