DjangoでDashとPlotlyのグラフを同時に描く
今回は、前回の「可視化フレームワークDashをDjangoで利用する」の続編です。Django上に作成したDashと同じページにplotlyで描いたグラフを追加するというものです。
plotly.js CDNを利用できるようにする
まずは、base.htmlにWebページでPlotly.jsを利用できるようにCDNの設定をしておきます。
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>World Map</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <!- ここを追加 -> <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> </head>
views.pyに関数を記述する
前回のviews.pyは以下の通りでした。
# views.py(前回) def index(request): return render(request, 'worldmap/index.html')
今回は、ここに簡単な折れ線グラフを描く関数scatter
を記述していきます。
# views.py(今回) def index(request): def scatter(): x1 = [1, 2, 3, 4] y1 = [30, 35, 25, 45] trace = go.Scatter( x = x1, y = y1 ) layout = dict( title = 'Simple Graph', xaxis = dict(range = [min(x1), max(x1)]), yaxis = dict(range = [min(y1), max(y1)]) ) fig = go.Figure(data=[trace], layout=layout) plotly_div = plot(fig, output_type='div', include_plotlyjs=False) return plotly_div context = { 'plot': scatter() } return render(request, 'worldmap/index.html', context=context)
ポイントはplot(fig, output_type='div', include_plotlyjs=False)
のoutput_type
とinclude_plotlyjs
かと思いますが、以下のサイトに詳しいのでそちらをご参照いただければと思います。
Plotlyで作るグラフをDjangoで使う - Qiita
context
にてscatter関数の結果をindex.html
に渡します。
htmlページに結果を表示する
index.html
に以下の記述を追記する。
{% extends 'base.html' %} {% load static %} {% block content %} {% load plotly_dash %} <div class="{% plotly_class name='WorldMap' %} card" style="height: 100%; width: 100%;"> {% plotly_app name='WorldMap' ratio=0.60 %} </div> <br> {{ plot | safe}} <!- ここを追記 -> {% endblock %}
あとは、前回 ratio = 1.0と利用可能画面の 100%をDashが占めるように設定していましたが、今回はこれを ratio = 0.65としてplotlyのグラフが表示できるように変更します。
これだけです。
それでは表示してみましょう。
画面下が切れているようですが、スクロールすると表示できます。 うまくいきましたね。
今回は以上です。
ご参考までに以下にスクリプトをアップしています。
GitHub - tak-akashi/djangomap2