时间戳

首页 > 解决方案 > 如何摆脱我的散景图周围的这些额外文本（Flask Web 应用程序）

python - 如何摆脱我的散景图周围的这些额外文本（Flask Web 应用程序）

问题描述

我正在尝试在我的 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 %}

我得到以下结果： 在此处输入图像描述

标签： pythonflaskbokeh

解决方案

尝试更换

    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 }}

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

推荐阅读