如何在 jquery-ui 调整大小事件时触发 BokehJS 绘图调整大小？

Question

我正在尝试在一个简单的 html 页面中使用 BokehJS，该页面包含一个 div id="myMenu"，可以使用 jquery-ui 调整大小。我希望包含 BokehJS 图的 div id="myPlot" 动态调整大小以填充 window.

的其余部分

在下面的示例中（这是迄今为止我能得到的最好的），尽管使用 sizing_mode:'stretch_both' 我可以触发 BokehJS 绘图调整大小的唯一方法是手动调整网络浏览器的大小 window。

是否可以使用 javascript 触发 BokehJS 绘图调整大小？要使用的功能是什么？然后计划是在自定义 jquery-ui 调整大小事件处理程序中使用该函数。

编辑：使用 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.bokeh.org/bokeh/release/bokeh-1.1.0.min.css" type="text/css" />
    <link rel="stylesheet" href="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-1.1.0.min.css" type="text/css" />
    <link rel="stylesheet" href="https://cdn.bokeh.org/bokeh/release/bokeh-tables-1.1.0.min.css" type="text/css" />

    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-1.1.0.min.js"></script>
    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-1.1.0.min.js"></script>
    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-1.1.0.min.js"></script>
    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-1.1.0.min.js"></script>
    <script type="text/javascript" src="https://cdn.bokeh.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>

Answer 1

根据 github.com/bokeh/bokeh/issues/7132

的 Bokeh 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.bokeh.org/bokeh/release/bokeh-0.12.10.css" type="text/css" />
    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.10.js"></script>
    <script type="text/javascript" src="https://cdn.bokeh.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>

Answer 2

Bokeh 1.1.0 根据 github.com/bokeh/bokeh/issues/7132

的工作解决方案

<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.bokeh.org/bokeh/release/bokeh-1.1.0.min.css" type="text/css" />
    <link rel="stylesheet" href="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-1.1.0.min.css" type="text/css" />
    <link rel="stylesheet" href="https://cdn.bokeh.org/bokeh/release/bokeh-tables-1.1.0.min.css" type="text/css" />

    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-1.1.0.min.js"></script>
    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-1.1.0.min.js"></script>
    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-1.1.0.min.js"></script>
    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-1.1.0.min.js"></script>
    <script type="text/javascript" src="https://cdn.bokeh.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>

如何在 jquery-ui 调整大小事件时触发 BokehJS 绘图调整大小？

How to trigger BokehJS plot resize upon jquery-ui resize event?

javascript

plot

jquery-ui-resizable

bokeh

responsive