Question

我试图让工具提示与Timeline一起使用团体订购。我收到了错误：

未捕获错误：未提供容器在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>

Answer 1

所以它只是添加标题标签并使用跟随选项不起作用。感谢

Vis时间轴工具提示是否工作时间轴 - 群组订购？

1 个答案: