Графики обрезаются при рендеринге HTML с использованием колбы Tempelate

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

и во фляге:

@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')   

и у меня также есть другая часть в файле запуска колбы, который отображает 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 Я получаю хороший рендеринг сюжета:

введите описание изображения здесь

но при звонке: http://127.0.0.1:8080/TreePlot

все графики нанесены друг на друга, и нет смысла, почему:

введите описание изображения здесь

Есть идеи?

Answer 1

В этом фрагменте ничто не связывает plt с ByteImage. Попробуйте добавить что-то вроде этого:

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

return ByteImage

У меня есть пример рабочей игрушки здесь , который показывает некоторые дополнительные детали, которые могут вам понадобиться.