Question

我有一个想在django模板中显示的海洋条形图图像。

我查看了一些解决方案，并设法使用HttpResponse显示图像。但是，它显示的图像只是一个图像。我想要的是网页上的地块图像，您仍然可以单击导航栏和主页按钮等。

import seaborn as sns
import matplotlib.pyplot as plt
from matplotlib.backends.backend_agg import FigureCanvasAgg
from io import BytesIO
from django.template.loader import render_to_string

在views.py

def top_causal(request):
  # code for data manipulation
  f = plt.figure(figsize=(10, 5))
  ax = sns.barplot(data)
  # labels, title etc...

  FigureCanvasAgg(f)
  buf = BytesIO()
  plt.savefig(buf, format='png)
  plt.close(f)

  # this works
  response = HttpResponse(buf.getvalue(), content_type='image/png')
  return response

  # What I want which is to display the image inside a template(does not work)
  buffer = buf.getvalue()
  content_type="image/png"
  graphic = (buffer, content_type)
  rendered = render_to_string('top_causal.html', {'graphic': graphic})
  return HttpResponse(rendered)

在top_causal.html

<img src="data:image/png;base64,{{ graphic|safe }}" alt="Not working.">

HttpResponse将图像显示为页面。

使用render_to_string的响应将返回此结果，而不是返回网页内的图像。我仍然可以看到导航栏。

\x06\x1d\x00\x80kT\xb7n]eee\x95\x18\xff\xe1\x87\x1f$I\xf5\xea\xd5\xb3\x19\xcf\xce\xce.\x11\x9b\x9d\x9d-WWW999U\xb8~\xa7N\x9d$\xfd\xf6\x02\xb2\xb0\xb00IR\x9b6mt\xe4\xc8\x91\x12\xb1G\x8e\x1c\x91\xc5b\xb9\xea\xe7\xe1\xda\xb5k\xa7\xf7\xdf\x7f_\xc5\xc5\xc5:|\xf8\xb0V\xadZ\xa5\xe7\x9f\x7f^\xb5j\xd5\xd2\xd4\xa9S\xafx\xee\xdbo\xbf\xad\x81\x03\x07j\xc9\x92%6\xe3\xb9\xb9\xb9\xe5\xba\x9e\xbau\xeb\xcab\xb1h\xc2\x84\t\x9a0aB\xa91M\x9b6-W\xae\xab\xa9W\xaf\x9e\xaaU\xab\xa6\xbd{\xf7\xaaj\xd5\xaa%\xe6]\\\\\xecR\xe7\xb2;\xef\xbcSqqq\x92~{Q\xde\xbb\xef\xbe\xaby\xf3\xe6\xa9\xb8\xb8X\x8b\x16-\xb2k-\x00\x80\xe3b\x07\x1d\x00\x80k\xd4\xb7o_\xa5\xa4\xa4\x94x\x13w||\xbc\xaaT\xa9\xa2\x90\x90\x10\x9b\xf1\xf7\xdf\x7f\xdfz\x8b\xb5$\x9d;wN[\xb7n-\x11W^\x97o\x8do\xd6\xac\x99ul\xc8\x90!JIIQJJ\x8au\xec\xd7 ...

Answer 1

您需要将图像转换为字节数组，将其编码为base64并将其嵌入到模板中。这是您的操作方式：

<!DOCTYPE html>
<!--my_template.html-->
<html>
  <div class='section'>
    <div class='flex column plot mt15 mlr15 justify-left align-left'>
      <img src='{{ imuri }}'/>
    </div>
  </div>
</html>

from django.template.loader import get_template

def top_causal(request):

    # .......................
    # Get your plot ready ...
    # .......................

    figure = plt.gcf()
    buf = io.BytesIO()
    figure.savefig(buf, format='png', transparent=True, quality=100, dpi=200)
    buf.seek(0)
    imsrc = base64.b64encode(buf.read())
    imuri = 'data:image/png;base64,{}'.format(urllib.parse.quote(imsrc))
    context = { 'plot': imuri}

    # Now embed that to your template
    template = get_template('my_template.html')
    html = template.render(context=context)

    # Your template is ready to go...

Answer 2

我放弃了使用matplotlib的想法，转而使用Highcharts https://www.highcharts.com/来绘制图形并将其显示在网页上。

显示的数据是使用Django的ORM和Query API完成的。

Matplotlib图像未显示在Django模板中

2 个答案: