実現したいこと
APIデータからMatplotlibで書いたPlotをボタンを押すことによってDjangoで表示したいのですが、おそらく画像データが空になっていて表示されません。また、更新ボタンを押す前にどうしても空の画像が表示されてしまうので、そこも改善できたらうれしいです。
ソースコード
views
1class PlotView(generic.FormView): 2 template_name = 'temp.html' 3 form_class = PlotForm 4 success_url = reverse_lazy('app:temp') 5 6 def post(self, request): 7 form = ForecastingForm(request.POST) 8 area = 'Test' 9 10 if area != 'Error': 11 graph_draw(area) # 適切に動作しています。 12 13 context = { 14 'form': form, 15 } 16 17 18 return render(request, 'temp.html', context)
viewsplot
1def graph_draw(area): 2 API_KEY = os.environ.get('API_KEY') 3 4 url = "http://api.openweathermap.org/data/2.5/forecast?q={city}&appid={key}&lang=en&units=metric" 5 url = url.format(city=area, key=API_KEY) 6 7 jsondata = requests.get(url).json() 8 9 ### Plot の内容 ### 10 11 plt.show() # 更新ボタンによって目的のplotが表示されていることは確認済です。 12 plt.savefig(byte, format='png') 13 byte.seek(0) 14 im = Image.open(byte) 15 response = HttpResponse(content_type="image/png") 16 im.save(response, "PNG") 17 18 return response
urls
1app_name = 'app' 2urlpatterns = [ 3 path('temp/', views.PlotView.as_view(), name='temp'), 4 5 # グラフ描画 6 path('plot/', viewsplot.graph_draw, name='plot') # ここがおかしいのかもしれません。 7]
temp.html
1<div class="container"> 2 <div class="row"> 3 <div class="my-div-style"> 4 <form action="" method="POST"> 5 {% csrf_token %} 6 7 {{ form.non_field_errors }} 8 9 {% for field in form %} 10 {{ field }} 11 {{ field.errors }} 12 {% endfor %} 13 14 <div class="field"> 15 <button class="btn btn-primary" type="submit">更新</button> 16 </div> 17 18 <img src="{% url 'app:plot' %}"> 19 20 </form> 21 22 </div> 23 </div> 24</div>
分からないとこ
- 空の画像データになってしまう
> なぜ更新ボタンを押しても空の画像データが出力されてしまうのか分かりません。画像を新しいページで表示してみると、うまくAPIからのjsondataを取得できていないようなエラー表示があります。
- そもそも描いたplotを適切に表示できる状態になっているのか
https://ebi-works.com/matplotlib-django/ こちらのページを参考にしましたが、いまだプロットが表示できたことがないので、この処理がうまく行っていないのかもしれません。
確認したこと
- プロットは適切に描画できている
plot.show()で思うようなプロットをかけていることは確認済です。またformでの入力から受け取った値からのグラフ描画はできています。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。