代码之家  ›  专栏  ›  技术社区  ›  Francesco G.

如果数据为空,则Vis.js Timeline不可见

  •  0
  • Francesco G.  · 技术社区  · 6 年前

    当我没有数据时,时间线不存在,但是我需要一个空的时间线。

    function setTable(){
          var select = document.getElementById("select");
          var value = select.options[select.selectedIndex].value;
          var container = document.getElementById('mytimeline');
          container.innerHTML = "";
          
          if(value=="full"){
              var items = new vis.DataSet([
                {id: 1, group: 1, content: 'item 1', start: '2013-04-20'},
                {id: 2, group: 2, content: 'item 2', start: '2013-04-14'},
                {id: 3, group: 3, content: 'item 3', start: '2013-04-18'},
                {id: 4, group: 3, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
                {id: 5, group: 1, content: 'item 5', start: '2013-04-25'},
                {id: 6, group: 1, content: 'item 6', start: '2013-04-27'}
              ]);
    
              var groups = new vis.DataSet([
                {id: 1, content: 'aaa'},
                {id: 2, content: 'bbb'},
                {id: 3, content: 'ccc'},
                {id: 4, content: 'ddd'}
              ]);
              var options = {};
              var timeline = new vis.Timeline(container, items, groups, options);
          }else if(value=="empty"){
              var items = new vis.DataSet();
              var groups = new vis.DataSet();
              var options = {};
              var timeline = new vis.Timeline(container, items, groups, options);
              
            	alert("don't work... \n I would like to have an empty TimeLine... not a \nLike I have do it in oldest version (3.10.0)\nhttp://jsfiddle.net/n427qjLm/2/");
          }
        }
        #mytimeline{
          border:1px solid gray;
          padding : 5px;
        }
        .vis.timeline .labelset .vlabel .inner {
          min-height: 100px;
        }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" rel="stylesheet"/>
    
    
      <select id="select" onchange="setTable()">
        <option value="">Select</option>
        <option value="full">Full</option>
        <option value="empty">Empty</option>
      </select>
      
      <div id="mytimeline"></div>
    1 回复  |  直到 5 年前
        1
  •  3
  •   hathija    6 年前

    如果需要空时间线,则必须在选项中指定“开始”:

    var options = { start: '2018-08-20' };

    推荐文章