Question

我试图制作一个烧瓶应用程序，该应用程序从用户那里获取CSV文件，然后适合我的ML算法，最后显示了两个散点图。
尽管我可以通过Markup(file_html(plot_obj, CDN, "my plot")显示单个散点图，但是当我使用components(plot_obj)和render_template一起显示它们时，却没有显示它们。另外，我在控制台中没有错误。我可以上传数据，然后运行算法并在控制台中获取结果，但是仍然看不到图表。

这是我的app.py ：

from prad_run import fit
from plots_anomalies import tsne_plot
from bokeh.resources import INLINE, CDN

from bokeh.plotting import figure

import os
from flask import Flask, flash, request, redirect, render_template
from pr_run import fit
from plots import tsne_plot

app = Flask(__name__)

@app.route('/',methods = ['GET'])
def home():


    return render_template('home.html')

@app.route('/', methods=['POST'])
def results():
    if request.method == 'POST':
        file = request.files['file']

        df = pd.read_csv(file)

        gold_label, df_pr = fit(df)

        y_pr = df_pr.loc[:, 'avg_score']
        X_tsne = df_pr.drop(columns='avg_score')

        tsne_value = plot(X_tsne)



        p_true = figure(title="Data with True Labels",plot_width=300, plot_height=300,)
        true_df = pd.DataFrame(data=tsne_value, columns=["v1", "v2"])
        colormap = {1: 'red', 0: 'green'}
        true_df['label'] = gold_label

        true_df["color"] = true_df['label'].map(lambda x: colormap[x])

        p_true.scatter(true_df['v1'], true_df['v2'], color=true_df['color'], fill_alpha=0.8, size=5)


        p_pr = figure(title="Predicted results",plot_width=300, plot_height=300)

        tsne_df = pd.DataFrame(data=tsne_value, columns=["v1", "v2"])
        tsne_df["pr"] = [1 if x > 0.115 else 0 for x in y_pr]
        colormap = {1: 'red', 0: 'green'}


        tsne_df['color'] = tsne_df['pr'].map(lambda x: colormap[x])
        print(tsne_df['color'].values)
        p_pr.scatter(tsne_df['v1'], tsne_df['v2'], color=tsne_df['color'], fill_alpha=0.8, size=7)
        js1, divs1 = components(p_true)
        js2, divs2 = components(p_pr)

        return render_template("home.html", js1=js1, divs1=divs1,js2=js2, divs2=divs2 )

在我的 home.html 中：


<!doctype html>
<html>

<title>Python Flask File Upload Example</title>
<h2>Select a file to upload</h2>
<p>
    {% with messages = get_flashed_messages() %}
      {% if messages %}
        <ul class=flashes>
        {% for message in messages %}
          <li>{{ message }}</li>
        {% endfor %}
        </ul>
      {% endif %}
    {% endwith %}
</p>
<form method="post" action="/" enctype="multipart/form-data">
    <dl>
        <p>
            <input type="file" name="file" autocomplete="off" required>
        </p>
    </dl>
    <p>
        <input type="submit" value="Submit">
    </p>
</form>


<meta charset="UTF-8">

   <head>
  <title>Figure examples</title>
  <link rel="stylesheet" href="http://cdn.bokeh.org/bokeh/release/bokeh-1.4.0.min.css" type="text/css" />
  <script type="text/javascript" src="http://cdn.bokeh.org/bokeh/release/bokeh-1.4.0.min.js"></script>
       <link
            href="https://cdn.bokeh.org/bokeh/release/bokeh-1.4.0.min.css"
            rel="stylesheet" type="text/css">
    <link
            href="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-1.4.0.min.css"
            rel="stylesheet" type="text/css">
    <link
            href="https://cdn.bokeh.org/bokeh/release/bokeh-tables-1.4.0.min.css"
            rel="stylesheet" type="text/css">

    <script src="https://cdn.bokeh.org/bokeh/release/bokeh-1.4.0.min.js"></script>
    <script src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-1.4.0.min.js"></script>
    <script src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-1.4.0.min.js"></script>
  {{ script|safe }}
 </head>

    <body>
<div style="width: 20%; display: inline-block;">
    {{ divs1 | safe }}
    <script src="https://cdn.bokeh.org/bokeh/release/bokeh-1.4.0.min.js"></script>
    <script src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-1.4.0.min.js"></script>
    {{ js1 | safe }}
</div>

<div style="width: 20%; display: inline-block;">
    {{ divs2 | safe }}
    <script src="https://cdn.bokeh.org/bokeh/release/bokeh-1.4.0.min.js"></script>
    <script src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-1.4.0.min.js"></script>
    {{ js2 | safe }}
</div>

</body>
</html>

你知道是什么引起了这个问题吗？

Answer 1

由<script>返回的components标签必须放在<head>中而不是<body>中。此外，您不需要像上面那样多次从CDN加载BokehJS。

您可能还需要考虑使用更新的json_items API进行嵌入，在许多情况下，该API可能更简单：

https://docs.bokeh.org/en/latest/docs/user_guide/embed.html?highlight=components#json-items

Answer 2

我发现未显示地块的原因是使用Conda环境。如果您使用Bokeh和Flask，我建议您在制作应用程序的同一文件夹中使用virtualenv，而不要创建Conda环境。

散景散点图未显示

2 个答案: