폴리머 오류가있는 Vis.js 타임 라인 : 타임 라인 눈금에 문제가 있습니다.

Question

polymer 및 vis.js 타임 라인을 사용하여 타임 라인 웹 구성 요소를 만들고 싶습니다.

폴리머 요소 코드

<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