Question

我使用Matplotlib在Web浏览器中显示图表。考虑这个最小的例子：

url.py

from django.conf.urls import patterns, include, url
from django.contrib import admin
from tests import views

urlpatterns = patterns('',
    url(r'^admin/', include(admin.site.urls)),
    url(r'^test/$', views.page_test),
    url(r'^test/barchart_test.png$', views.barchart_test),
    url(r'^test/piechart_test.png$', views.piechart_test),
)

views.py

import matplotlib.pyplot as plt
from matplotlib.backends.backend_agg import FigureCanvasAgg
from django.http import HttpResponse
from django.shortcuts import render

def page_test(request):
    return render(request, 'test.html')

def barchart_test(request):
    x = range(0, 2)
    y = (40, 80)
    width = 0.20

    fig, ax1 = plt.subplots()
    fig.frameon = False

    ax1.bar(x, y, width, align='center', color=('#44A744', '#D95F61'))

    canvas = FigureCanvasAgg(fig)
    response = HttpResponse(content_type='image/png')
    canvas.print_png(response)
    plt.close(fig)
    return response

def piechart_test(request):
    num = [2, 6, 10]
    lab = ['A', 'B', 'C']

    fig, ax1 = plt.subplots()

    ax1.pie(
        num,
        labels=lab,
        )

    canvas = FigureCanvasAgg(fig)
    response = HttpResponse(content_type='image/png')
    canvas.print_png(response)
    plt.close(fig)
    return response

模板（test.html）

<!DOCTYPE html>
<html>

<head>
    <title>test</title>
</head>
<body>
    <div id="barchart_test">
        <h2 align="center">Bar</h2>
        <img align="center" title="Bar title" src="barchart_test.png">
    </div>

    <div id="piechart_test">
        <h2 align="center">Pie</h2>
        <img align="center" title="Pie title" src="piechart_test.png">
    </div>

</body>
</html>

在我的网络浏览器（Chrome版本38.0.2125.122）中，数字首次显示时没有最终位置。在装载结束时，它们移动到正确的位置。

是否有可能阻止这种转变并立即在正确的位置看到数字？

Matplotlib和Django：如何防止页面加载时图形的移位？

0 个答案: