Question

我正在尝试通过将图形放在HTML模板中来输出结果。

我具有绘制情节的功能：

def Density(**some arguments to get data)
    fig = plt.figure(figsize=(500/96,500/96), dpi=96)
    ax = fig.add_subplot(111)
    sns.distplot(#ploting worksfine )

    #so here is the fun part
    ByteImage = ByteIO()
    plt.close()
    plt.clf()
    FigureCanvasAgg(fig).print_png(BytesImage)
    ByteImage.seek(0)

    return ByteImage

和在Flask中：

@app.route('/plot/<group>', methods=['GET'])
def plot(group):

    BytesImage = Density(splitDataframe(df_dataset,group,1),'Y(C2), %',group)

    return send_file(BytesImage, attachment_filename = 'plot'+str(group)+'.png', mimetype = 'image/png')

并且我在flask运行文件中还有另一部分可以呈现HTML

@app.route('/TreePlot')
    def buildPage():
        data = [{'divisions': ['1a', '1b'], 'show': [True, True], 'width': [8, 92]}]
        return render_template('Template.html', data=data)

，HTML模板为：

{% for items in data %}
        <div class="levels" style="width: 100%">
            {% for groupnumber in range(items.divisions|length)%} {% if items.show[groupnumber] == True %}
            <div class="groups" style="width: {{items.width[groupnumber]}}%">
                <div class="content"> {{items.divisions[groupnumber]}} </div>
                <img src="http://localhost:8080/plot/{{items.divisions[groupnumber]}}" />
            </div>
            {% else %}
            <div class="groups" style="width: {{items.width[groupnumber]}}%">
                <div class="content-empty"> </div>
            </div>
            {% endif %} {% endfor %}
        </diV>
        {% endfor %}

所以当我打电话给http://127.0.0.1:8080/plot/3a时我得到了一个不错的渲染图：

enter image description here

但在致电时： http://127.0.0.1:8080/TreePlot

所有图都在彼此的顶部绘制，为什么没有道理

enter image description here

有什么想法吗？

Answer 1

在该代码段中，没有任何内容将plt与ByteImage连接起来。尝试添加如下内容：

ByteImage = ByteIO()
plt.savefig(ByteImage)  # << add this
plt.close()
plt.clf()
ByteImage.seek(0)

return ByteImage

我有一个有效的玩具示例here，其中显示了您可能需要的一些其他零件。

使用Flask Tempelate呈现HTML时，图形会变线

1 个答案: