【问题标题】:Does Vis Timeline tooltips work timeline - groups-ordering?Vis 时间线工具提示是否工作时间线 - 组排序?
【发布时间】:2018-03-16 13:46:50
【问题描述】:

我正在尝试让工具提示与时间轴一起使用 |团体订购。 我收到了错误:

未捕获的错误:未提供容器 在 Timeline.Core._create (vis.js:9748) 在新的时间线 (vis.js:40685)

有没有时间线的例子 |使用工具提示进行分组排序?

看着http://visjs.org/examples/timeline/items/tooltip.html

    <!DOCTYPE HTML>
    <html>
    <head>
      <title>Timeline | Groups ordering</title>

     <style>
        body, html {
          font-family: arial, sans-serif;
          font-size: 11pt;
        }

        #visualization {
          box-sizing: border-box;
          position: relative;
          width: 100%;
          height: 300px;
        }

    </style>

      <script src="./dist/moment.min.js"></script>
      <script src="./dist/vis.js"></script>
      <link href="./dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />

    </head>
    <body>
    <h1> Oracle Database </h1>
    <div id="tooltips-follow">
        <div class="menu">
            <input type="image" src="dist/img/network/plus.png" id="zoomIn" value="Zoom in"/>
            <input type="image" src="dist/img/network/minus.png" id="zoomOut" value="Zoom out"/>
            <input type="image" src="dist/img/network/leftArrow.png" id="moveLeft" value="Move left"/>
            <input type="image" src="dist/img/network/rightArrow.png" id="moveRight" value="Move right"/>
        </div>
    </div>
    <script>

      var groups = new vis.DataSet([
    {id:0, content: "Database Roadmap", value: 0},
    ...
    ]);

      // create a dataset with items
      // note that months are zero-based in the JavaScript Date object, so month 3 is April
      var items = new vis.DataSet([
     {id:1, group:0, content: "Full", className: "Full", start: new Date(2018, 01, 01), end: new Date(2022, 06, 30), title: 'Start Date2010, 07, 01<br> End Date2010, 07, 01'},
     ...
    ]);

      // create visualization
      var container = document.getElementById('tooltips-follow');
      var options = {
        // option groupOrder can be a property name or a sort function
        // the sort function must compare two groups and return a value
        //     > 0 when a > b
        //     < 0 when a < b
        //       0 when a == b
        groupOrder: function (a, b) {
          return a.value - b.value;
        },
        start: new Date(),
        end: new Date(1000*60*60*36864 + (new Date()).valueOf()),
        stack: false,
        editable: false,
        clickToUse: true
      };
      var timeline = new vis.Timeline(container);
      timeline.setOptions(options);
      timeline.setGroups(groups);
      timeline.setItems(items);
        function move (percentage) {
            var range = timeline.getWindow();
            var interval = range.end - range.start;

            timeline.setWindow({
                start: range.start.valueOf() - interval * percentage,
                end:   range.end.valueOf()   - interval * percentage
            });
        }
        // attach events to the navigation buttons
        document.getElementById('zoomIn').onclick    = function () { timeline.zoomIn( 0.2); };
        document.getElementById('zoomOut').onclick   = function () { timeline.zoomOut( 0.2); };
        document.getElementById('moveLeft').onclick  = function () { move( 0.2); };
        document.getElementById('moveRight').onclick = function () { move(-0.2); };

      // Follow options
      var follow_options = {
        tooltip: {
          followMouse: true
        }
      };

      var timelineFollow = new vis.Timeline(document.getElementById('tooltips-follow'),
          items, follow_options);


    </script>
    </body>
    </html>

【问题讨论】:

  • 似乎 tooltips-follow 不支持带有选项的组!我现在得到一个包含组但没有工具提示的时间线和一个没有组和工具提示的单独时间线。

标签: vis.js vis.js-timeline


【解决方案1】:

所以它只通过添加标题标签就可以工作,而使用跟随选项是行不通的。谢谢

【讨论】:

  • 如果您能展示您究竟做了哪些更改来解决您的问题并接受您的回答,这样您就可以立即看到问题已得到解决,您将非常感激。最好的问候
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-08-05
  • 1970-01-01
  • 2017-10-04
相关资源
最近更新 更多