web-dev-qa-db-ja.com

pythonを使用してグラフをプロットし、HTMLを使用して表示する

グラフを表示するためにplotlyを使用してオフラインアプリケーションを構築したいと思います。バックエンドにpython（flask）を使用し、フロントエンドにHTML（javascript）を使用しています。現在、グラフデータをJSONオブジェクトとしてフロントエンドに送信し、フロントエンド自体でplotly.jsを使用してグラフを作成することで、グラフをプロットできます。しかし、私が実際に望んでいるのは、サーバー（バックエンド、つまりpython）側でグラフを作成し、データをHTMLで表示することです。 pythonでグラフをビルドするプロットドキュメントを確認しましたが、ビルドグラフをフロントエンドに送信して表示する方法がわかりません:(誰かがそれについて私を助けてくれますか？PS：Iオフラインアプリケーションを構築したい更新されたコード

$(window).resize(function() {
         var divheight = $("#section").height();
         var divwidth = $("#section").width();
         var update = {
                  width:divwidth,  // or any new width
                  height:divheight // " "
                };

          var arr = $('#section > div').get();
          alert(arr[1]);
        Plotly.relayout(arr[0], update);
            }).resize();
         });
pythonhtmlplotly
7
danish sodhi

私の提案は、plotly.offlineモジュールを使用することです。これにより、プロットのオフラインバージョンが作成されます。彼らのウェブサイトにある陰謀的なAPIは恐ろしいものであり（実際には、各関数がどの引数を取るのか知りたくありませんか??）、Githubのソースコードを参照する方がはるかに優れています。

プロットされたソースコードを見ると、offline.plot関数がoutput_typeのkwargをとっていることがわかります。これは'file'または'div'のいずれかです。

https://github.com/plotly/plotly.py/blob/master/plotly/offline/offline.py

だからあなたはすることができます：

from plotly.offline import plot
from plotly.graph_objs import Scatter

my_plot_div = plot([Scatter(x=[1, 2, 3], y=[3, 1, 6])], output_type='div')

これにより、HTMLに直接挿入するためのコード（<div>タグでラップされた）が得られます。おそらく最も効率的な解決策ではないかもしれませんが（繰り返しのリクエストのためにキャッシュすることができる関連するd3コードも埋め込まれていると確信しているため）、それは自己完結型です。

Flaskを使用してdivをhtmlコードに挿入するには、いくつかのことを行う必要があります。

結果ページのhtmlテンプレートファイルで、プロットコードのプレースホルダーを作成します。 FlaskはJinjaテンプレートエンジンを使用するため、次のようになります。

<body>
....some html...

{{ div_placeholder }}

...more html...
</body>

Flask views.pyファイルでは、プロットコードをdiv_placeholder変数に挿入してテンプレートをレンダリングする必要があります。

from plotly.offline import plot
from plotly.graph_objs import Scatter
from flask import Markup
...other imports....

@app.route('/results', methods=['GET', 'POST'])
def results():
    error = None
    if request.method == 'POST':
        my_plot_div = plot([Scatter(x=[1, 2, 3], y=[3, 1, 6])], output_type='div')
        return render_template('results.html',
                               div_placeholder=Markup(my_plot_div)
                              )
    # If user tries to get to page directly, redirect to submission page
    Elif request.method == "GET":
        return redirect(url_for('submission', error=error))

明らかにYMMVですが、それは基本的な原則を説明するはずです。おそらく、プロットグラフを作成するために処理する必要があるPOSTデータを使用してユーザーリクエストを取得することに注意してください。

16
Andrew Guy

.to_html()メソッドを使用できます。

https://plot.ly/python-api-reference/generated/plotly.graph_objects.Figure.html#plotly.graph_objects.Figure.to_html

import plotly.express as px

fig = px.scatter(x=[0, 1, 2, 3, 4], y=[0, 1, 4, 9, 16])

div = fig.to_html(full_html=False)  # Get the <div> to send to your frontend and embed in an html page
1
Nicholas Morley