Диаграммы рассеяния боке не отображаются - PullRequest
Новая
       22

Диаграммы рассеяния боке не отображаются

0 голосов
/ 29 января 2020

Я попытался создать приложение flask, которое получает файл 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 )

В моем доме. 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>

Любая идея, что вызывает эту проблему?

Ответы [ 2 ]

0 голосов
/ 03 февраля 2020

Я обнаружил, что причина, по которой мои графики не отображались, заключалась в использовании среды Conda. Если вы используете Bokeh и Flask, я рекомендую вам использовать virtualenv в той же папке, в которой вы создаете свое приложение, вместо создания среды Conda.

0 голосов
/ 29 января 2020

Теги <script>, возвращаемые components, должны go в <head>, а не <body>. Кроме того, вам не нужно загружать Bokeh JS из CDN несколько раз, как вы делаете выше.

Вы также можете рассмотреть более новый json_items API для встраивания, который во многих случаях может быть проще:

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

...