Python 如何在没有URL错误的情况下将绘图嵌入Bokeh Flask?

Python 如何在没有URL错误的情况下将绘图嵌入Bokeh Flask?,python,flask,bokeh,Python,Flask,Bokeh,我是Bokeh和HTML的新手,正在建立一个图表,当两个过滤器发生变化时,该图表会发生变化。但是,当我通过FLASK运行代码时,我在另一个窗口上得到了一个URL not found错误。下面是输入页面(第一个屏幕截图),如果我点击提交另一个URL正在加载并说“找不到URL”(第二个屏幕截图),我不确定我做错了什么。我需要在同一页上输入和输出,如果有人能指导我,我将不胜感激。谢谢 第一个屏幕截图 第二个屏幕截图 我的app.py代码 import numpy as np from bokeh.

我是Bokeh和HTML的新手,正在建立一个图表,当两个过滤器发生变化时,该图表会发生变化。但是,当我通过FLASK运行代码时,我在另一个窗口上得到了一个URL not found错误。下面是输入页面(第一个屏幕截图),如果我点击提交另一个URL正在加载并说“找不到URL”(第二个屏幕截图),我不确定我做错了什么。我需要在同一页上输入和输出,如果有人能指导我,我将不胜感激。谢谢

第一个屏幕截图

第二个屏幕截图

我的app.py代码

import numpy as np
from bokeh.plotting import figure
import pandas as pd
from bokeh.models.tools import HoverTool
from flask import Flask, render_template, request
from bokeh.embed import components
from bokeh.io import show


x=np.random.random(100)
y=np.random.random(100)

f_12 = pd.Series(['f1', 'f2'])
f_12 = f_12.repeat(50)
f_34 = pd.Series(['f3', 'f4'])
f_34 = f_34.repeat(50)

sample_df = pd.DataFrame(data={'x': x
                          ,'y': y
                          ,'filter_12': f_12
                          ,'filter_34': f_34})

f12_list = sample_df['filter_12'].unique().tolist()
f34_list = sample_df['filter_34'].unique().tolist()


def grph(f_12, f_34):
    small_df = sample_df.loc[(sample_df['filter_12'] == f_12) & (sample_df['filter_34'] == f_34)]   
    x = list(small_df['x'])
    y = list(small_df['y'])
    fig=figure(x_axis_label="x",y_axis_label="y")
    hover=HoverTool()
    hover.tooltips = [
            ('X ','@x'),
            ('Y', '@y')]
    hover.mode = 'mouse'
    fig.add_tools(hover)
    par = np.polyfit(x, y, 1, full=True)
    slope=par[0][0]
    intercept=par[0][1]
    y_cal = [slope*i + intercept  for i in x]

    fig.line(x, y_cal, color='red', legend="Line_fit")
    fig.circle(x, y, color='green', legend='A')

    return fig (#edited this from show(fig) to fig)

app = Flask(__name__, template_folder='templates')
# Index page
@app.route('/viz2')
def index():
    f_12 = request.args.get("f_12")
    if f_12 == None:
        f_12 = "f1"
    f_34 = request.args.get("f_34")
    if f_34 == None:
        f_34 = "f3"
    # Create the plot
    plot = grph(f_12, f_34)
            # Embed plot into HTML via Flask Render
    script, div = components(plot)
    return render_template("view1.html", script=script, div=div, f12_list=f12_list, f34_list=f34_list, f_12=f_12, f_34=f_34)

if __name__ == '__main__':
    app.run(debug=True)
我的view1.html文件

<html>
<head>
<link
    href="http://cdn.pydata.org/bokeh/release/bokeh-1.1.0.min.css"
    rel="stylesheet" type="text/css">
<link
    href="http://cdn.pydata.org/bokeh/release/bokeh-widgets-1.1.0.min.css"
    rel="stylesheet" type="text/css">

<script src="http://cdn.pydata.org/bokeh/release/bokeh-1.1.0.min.js"></script>
<script src="http://cdn.pydata.org/bokeh/release/bokeh-widgets-1.1.0.min.js"></script>

</head>
<body>
<H1>Chart</H1>

<form action="/">
<select name="f_12">
    {% for f12 in f12_list %}
        {% if f12 == f_12 %}
            <option selected value="{{ f12 }}">{{ f12 }}</option> 
        {% else %} 
            <option value="{{ f12 }}">{{ f12 }}</option> 
        {% endif %}
    {% endfor %}
</select>
<select name="f_34">
    {% for f34 in f34_list %}
        {% if f34 == f_34 %}
            <option selected value="{{ f34 }}">{{ f34 }}</option> 
        {% else %} 
            <option value="{{ f34 }}">{{ f34 }}</option> 
        {% endif %}
    {% endfor %}
</select>
<input type="submit">
</form>

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

</body>
</html>


图表
{f12中f12的%u列表%}
{%if f12==f_12%}
{{f12}}
{%else%}
{{f12}}
{%endif%}
{%endfor%}
{f34中f34的%u列表%}
{如果f34==f_34%}
{{f34}
{%else%}
{{f34}
{%endif%}
{%endfor%}
{{script | safe}}
{{div | safe}}
您正在这样做:

return show(fig)
return fig
但我们必须这样做:

return show(fig)
return fig

请显示完整的回溯添加回溯屏幕截图到帖子!谢谢我已经编辑了代码,但是现在我得到了一个“URL not found error”(URL not found error),新图像指向的URL不是
/viz2
,这不是一个错误,我不知道为什么会这样做。我想知道如果我更改@app.route('/viz2'),您是否可以指导如何设置多输入表单以在同一窗口上显示输出到@app.route('/'')。我正在将图片加载到同一页上。谢谢。不知道您是否可以告诉我一个文档/网站/链接,我可以参考这个多输入类型表单。?