为什么Visjs时间线图的高度手动调整（可调整）不能使用？

Question

当我运行下面的代码并调整时间线图的高度时，可视化的时间线图就会出现问题。div 正在调整大小，但不是时间轴图表的高度。在Image1中，图表显示为resizable。第二个图像，我试图调整大小，但时间线图没有调整大小。你能帮我解决这个问题吗？

编码

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>jQuery UI Resizable </title>

  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js">
</script>

  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" />

</head>

<body>
  <div id="visualization"></div>
  <script type="text/javascript">
    // DOM element where the Timeline will be attached
    const container = document.getElementById("visualization");

    // Create a DataSet (allows two way data-binding)
    const items = new vis.DataSet([
      { 'id': 1, 'content': "item 1", 'start': "2014-04-20" },
      { 'id': 2, 'content': "item 2", 'start': "2014-04-14" },
      { 'id': 3, 'content': "item 3", 'start': "2014-04-18" },
      { 'id': 4, 'content': "item 4", 'start': "2014-04-16", 'end': "2014-04-19" },
      { 'id': 5, 'content': "item 5", 'start': "2014-04-25" },
      { 'id': 6, 'content': "item 6", 'start': "2014-04-27", 'type': "point" }
    ]);

    // Configuration for the Timeline
    const options = {};

    // Create a Timeline
    const timeline = new vis.Timeline(container, items, options);
    $("#visualization").resizable();
  </script>
</body>

</html>

Answer 1

根据你的图表，可视化div正在调整大小，但时间线图没有调整大小。时间轴图在jquery的resize方法中，在你的文件中加入下面的小代码------。

$("#visualization").resize(function(){
 var ht= $(this).height();
 timeline.setOptions({height:ht});
});

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js">
  </script>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" />
</head>
<body>
  <div id="visualization"></div>
  <script type="text/javascript">
  $(function () {
    const container = document.getElementById("visualization");
    const items = new vis.DataSet([
      { 'id': 1, 'content': "item 1", 'start': "2014-04-20" },
      { 'id': 2, 'content': "item 2", 'start': "2014-04-14" },
      { 'id': 3, 'content': "item 3", 'start': "2014-04-18" },
      { 'id': 4, 'content': "item 4", 'start': "2014-04-16", 'end': "2014-04-19" },
      { 'id': 5, 'content': "item 5", 'start': "2014-04-25" },
      { 'id': 6, 'content': "item 6", 'start': "2014-04-27", 'type': "point" }
    ]);

    const options = {};
    const timeline = new vis.Timeline(container, items, options);

    $("#visualization").resizable();

    $("#visualization").resize(function () {
      var ht = $(this).height();
      timeline.setOptions({ height: ht });
    });

  });
  </script>
</body>

</html>

为什么Visjs时间线图的高度手动调整（可调整）不能使用？

问题描述投票：0回答：1

1个回答

最新问题

为什么Visjs时间线图的高度手动调整（可调整）不能使用？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1