如何去除散景图周围的多余文本（Flask Web 应用程序）

Question

我正在尝试将 Bokeh 图表集成到我的 Flask Web 应用程序中（我成功了），滑块也可以完美运行。但是我在我的图表周围得到了一些额外的代码，如下图所示。谁能告诉我为什么我会收到这些额外的文字以及如何摆脱它？

谢谢

代码摘录如下：

from bokeh.layouts import column
from bokeh.models import ColumnDataSource, CustomJS, Slider
from bokeh.plotting import figure, output_file, show

@app.route('/graph')
def graph():
    x = [x*0.005 for x in range(0, 200)]
    y = x

    source = ColumnDataSource(data=dict(x=x, y=y))

    plot = figure(plot_width=400, plot_height=400)
    plot.line('x', 'y', source=source, line_width=3, line_alpha=0.6)

    callback = CustomJS(args=dict(source=source), code="""
            var data = source.data;
            var f = cb_obj.value
            var x = data['x']
            var y = data['y']
            for (var i = 0; i < x.length; i++) {
                y[i] = Math.pow(x[i], f)
            }
            source.change.emit();
        """)

    slider = Slider(start=0.1, end=4, value=1, step=.1, title="power")
    slider.js_on_change('value', callback)

    layout = column(slider, plot)

    script, div = components({"plot": plot,"slider":column(slider)})
    kwargs = {'script': script, 'div': div}
    kwargs['title'] = 'bokeh-with-flask' 

    return render_template('graph.html', **kwargs)

这是HTML：

{% extends "base.html" %}
{% block content %}
    
<html lang="en">

    <head>
        <meta charset="utf-8">
        <title>{{ title }}</title>

<link
    href="https://cdnjs.cloudflare.com/ajax/libs/bokeh/1.2.0/bokeh.min.css"
    rel="stylesheet" type="text/css">
<link
    href="https://cdnjs.cloudflare.com/ajax/libs/bokeh/1.2.0/bokeh-widgets.css"
    rel="stylesheet" type="text/css">


    <link
    href="https://cdnjs.cloudflare.com/ajax/libs/bokeh/1.2.0/bokeh-tables.css"
    rel="stylesheet" type="text/css">
    </head>
    <body>
        <h1>Chart</h1>
        {{ div|safe }}
        {{ script|safe }}
    </body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bokeh/1.2.0/bokeh.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bokeh/1.2.0/bokeh-widgets.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bokeh/1.2.0/bokeh-tables.js"></script>
</html>

{% endblock %}

我得到以下结果：

Answer 1

尝试更换

    script, div = components({"plot": plot,"slider":column(slider)})
    kwargs = {'script': script, 'div': div}

和

    script, (plot_div, slider_div) = components((plot, column(slider)))
    kwargs = {'script': script, 'plot_div': plot_div, 'slider_div': slider_div}

和

        {{ div|safe }}
        {{ script|safe }}

和

        {{ plot_div|safe }}
        {{ slider_div|safe }}
        {{ script|safe }}

或者，由于您直接将它们一个接一个地嵌入，只需将它们一起包装在一个 column 中并传递给 components，而不是分别传递多个根。

Answer 2

编辑：我测试了 Eugene 的解决方案，它也非常有效！

好的，感谢 AKS 的回复，我找到了解决方案（尽管我认为不是很优雅）：

正如他所说，“div”确实存在问题。所以我把它打印出来，得到了这个：

{'plot': '\n<div class="bk-root" id="8cb7e626-f766-451b-86c9-2a4b0e22fdab" data-root-id="2881"></div>', 'slider': '\n<div class="bk-root" id="37b8cf2e-8889-4c9e-804d-9b6d65fedf0f" data-root-id="2921"></div>'}

我将此添加到我的初始代码中以修改“div”。它期待 html 类型的字符串，而不是 dic 类型的字符串：

a = div['plot']
b = div['slider']
div = a+b

后面是我之前的代码：

  kwargs = {'script': script, 'div': div}
  kwargs['title'] = 'bokeh-with-flask'

如何去除散景图周围的多余文本（Flask Web 应用程序）

How to get rid of this extra text around my Bokeh graph (Flask Web Application)

python

flask

bokeh