我正在尝试在包含div id="myMenu"的简单html页面中使用BokehJS，该页面可使用jquery-ui调整大小。我希望动态调整包含BokehJS图的div id="myPlot"以填充窗口的其余部分。
在下面的例子中（这是迄今为止我能得到的最好的），尽管使用sizing_mode:'stretch_both'我可以触发BokehJS绘图调整大小的唯一方法是手动调整Web浏览器窗口的大小。
是否可以使用javascript触发BokehJS图调整大小？使用的功能是什么？然后计划是在自定义jquery-ui resize事件处理程序中使用该函数。
编辑：使用Github上提供的解决方案更新示例。谢谢！
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.min.css" type="text/css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdn.pydata.org/bokeh/release/bokeh-1.1.0.min.css" type="text/css" />
<link rel="stylesheet" href="https://cdn.pydata.org/bokeh/release/bokeh-widgets-1.1.0.min.css" type="text/css" />
<link rel="stylesheet" href="https://cdn.pydata.org/bokeh/release/bokeh-tables-1.1.0.min.css" type="text/css" />
<script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-1.1.0.min.js"></script>
<script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-widgets-1.1.0.min.js"></script>
<script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-tables-1.1.0.min.js"></script>
<script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-gl-1.1.0.min.js"></script>
<script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-api-1.1.0.min.js"></script>
<!-- The order of CSS and JS imports above is important. -->
</head>
<body>
<div style="display:table; width:100%; height:100%; margin:0px; border:0px; padding:0px;">
<div style="display:table-row; width:100%; height:100%; margin:0px; border:0px; padding:0px;">
<div id="myMenu" style="display:table-cell; width:25%; vertical-align:top; height:100%; margin:0px; border:0px; border-right:1px solid grey; padding:0px;">
menu
</div>
<div id="myPlot" style="display:table-cell; height:100%; margin:0px; border:0px; padding:0px;"></div>
</div>
</div>
<script type="text/javascript">
// data to plot
var source = new Bokeh.ColumnDataSource({
data: { x: [0,1,2,3,4,5,6,7,8,9], y: [0,1,4,-2,2,5,0,2,1,1] }
});
// make the figure and add some tools
var tools = "pan,crosshair,wheel_zoom,box_zoom,reset,save";
var figure = new Bokeh.Plotting.figure({
title:"demo plot",
tools: tools,
toolbar_location:"above",
sizing_mode:"stretch_both"
});
var scatterData = figure.line({ field: "x" }, { field: "y" }, {
source: source,
line_width: 2
});
async function show(){
//Show Bokeh figure
var figure_view = await Bokeh.Plotting.show(figure,document.getElementById("myPlot"));
//Make left menu container resizable
($('#myMenu').resizable({
handles:'e',
resize:function(event,ui){
figure_view.resize_layout();
}
}));
}
show();
</script>
</body>
</html>
答案 0 :(得分：0)
根据github.com/bokeh/bokeh/issues/7132的散景0.12.10的工作解决方案
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" type="text/css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdn.pydata.org/bokeh/release/bokeh-0.12.10.css" type="text/css" />
<script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-0.12.10.js"></script>
<script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-api-0.12.10.js"></script>
<!-- The order of CSS and JS imports above is important. -->
</head>
<body>
<div style="display:table; width:100%; height:100%; margin:0px; border:0px; padding:0px;">
<div style="display:table-row; width:100%; height:100%; margin:0px; border:0px; padding:0px;">
<div id="myMenu" style="display:table-cell; width:25%; vertical-align:top; height:100%; margin:0px; border:0px; border-right:1px solid grey; padding:0px;">
menu
</div>
<div id="myPlot" style="display:table-cell; height:100%; margin:0px; border:0px; padding:0px;"></div>
</div>
</div>
<script type="text/javascript">
// data to plot
var source = new Bokeh.ColumnDataSource({
data: { x: [0,1,2,3,4,5,6,7,8,9], y: [0,1,4,-2,2,5,0,2,1,1] }
});
// make the plot and add some tools
var tools = "pan,crosshair,wheel_zoom,box_zoom,reset,save";
var figure = Bokeh.Plotting.figure({
title:"demo plot",
tools: tools,
toolbar_location:"above",
sizing_mode:"stretch_both"
});
var scatterData = figure.line({ field: "x" }, { field: "y" }, {
source: source,
line_width: 2
});
//Show Bokeh figure
var figure_view = Bokeh.Plotting.show(figure,document.getElementById("myPlot"));
//Make left menu container resizable
$('#myMenu').resizable({
handles:'e',
resize: function(event,ui){figure_view.resize();}
});
</script>
</body>
</html>
答案 1 :(得分：0)
根据github.com/bokeh/bokeh/issues/7132的VM505:2 Uncaught SyntaxError: Unexpected token <
at Function.globalEval (jquery.tools.min.js:49)
at Function.httpData (jquery.tools.min.js:152)
at XMLHttpRequest.x.onreadystatechange (jquery.tools.min.js:149)
globalEval @ jquery.tools.min.js:49
httpData @ jquery.tools.min.js:152
x.onreadystatechange @ jquery.tools.min.js:149
XMLHttpRequest.send (async)
ajax @ jquery.tools.min.js:150
chkpwd @ hw.php:295
onclick @ hw.php:877
的工作解决方案
function chkpwd() {
var pwd_val = $("#engpassword").val();
$.ajax({
url: 'password.php',
dataType: 'jsonp',
jsonp: 'processData',
data: {
pwd: pwd_val,
callback: 'pwdaction'
},
error: function(xhr) {
alert('Ajax request error!');
$(e.target).attr('disabled', false);
}
});
}