1
joke-ui를 사용하여 크기를 조절할 수있는 div id="myMenu"을 포함하는 간단한 html 페이지에서 BokehJS를 사용하려고합니다. BokehJS 플롯을 포함하는 div id="myPlot"이 나머지 윈도우를 채우기 위해 동적으로 크기가 조정되기를 바랍니다.joke-ui 크기 조정 이벤트시 BokehJS 플롯 크기 조정을 트리거하는 방법은 무엇입니까?
sizing_mode:'stretch_both'을 사용 했음에도 불구하고 BokehJS 플롯 크기 조정을 트리거 할 수있는 유일한 방법은 수동으로 웹 브라우저 창 크기를 조정하는 것입니다.
javascript를 사용하여 BokehJS 플롯 크기 조정을 트리거 할 수 있습니까? 사용할 함수는 무엇입니까? 그런 다음 계획은 사용자 정의 jquery-ui resize 이벤트 핸들러에서 해당 함수를 사용하는 것입니다.
EDIT : Github에서 제공된 솔루션을 사용하여 업데이트 된 예. 감사!
<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 plot = Bokeh.Plotting.figure({
title:"demo plot",
tools: tools,
toolbar_location:"above",
sizing_mode:"stretch_both"
});
var scatterData = plot.line({ field: "x" }, { field: "y" }, {
source: source,
line_width: 2
});
// Show the plot, appending it to the end of the current
// section of the document we are in.
var plot_view = Bokeh.Plotting.show(plot,document.getElementById("myPlot"));
//resizable left menu container
$('#myMenu').resizable({
handles:'e',
resize: function(event,ui){plot_view.resize();}
});
</script>
</body>
</html>