0

当我运行下面的代码并调整时间线图的高度时，可视化div正在调整大小，而不是时间线图的高度。在 image1 中，图表显示为可调整大小。我正在尝试调整大小的第二张图像，但时间线图表未调整大小。你能帮我解决这个问题吗？

在此处输入图像描述 在此处输入图像描述

代码

<!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>
4

1 回答 1

1

根据您的图表可视化 div 正在调整大小，但时间线图没有调整大小。在 jquery 的 resize 方法中使用时间线图的setOptions 方法/在文件中添加以下小代码 -

$("#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>

于 2020-06-03T16:13:05.393 回答