为啥手动调整 Visjs 时间线图的高度（可调整大小）不起作用？
Posted
技术标签:
【中文标题】为啥手动调整 Visjs 时间线图的高度（可调整大小）不起作用？【英文标题】：Why is manual adjustment of height (resizable) of Visjs timeline chart is not working?为什么手动调整 Visjs 时间线图的高度（可调整大小）不起作用？ 【发布时间】：2020-09-19 20:52:42 【问题描述】：当我运行下面的代码并调整时间线图的高度时，可视化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>
【问题讨论】：
您应该在问题中指定这是您在使用 Jquery-UI 的可调整大小时遇到的 Jquery-UI 问题。我不熟悉可调整大小的功能，但我猜您还需要调整container 的大小，查看可调整大小的 API，有一个 alsoResize 属性。 api.jqueryui.com/resizable 看看有没有帮助。
谢谢你能告诉我我们如何手动调整上述时间线图的高度（或高度和宽度）？
【参考方案1】：
根据您的图表可视化 div 正在调整大小，但时间线图没有调整大小。 在 jquery 的 resize 方法中使用 timeline chart 的 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>【讨论】：
以上是关于为啥手动调整 Visjs 时间线图的高度（可调整大小）不起作用？的主要内容，如果未能解决你的问题，请参考以下文章