首页django 将plt的图传到前端html

django 将plt的图传到前端html

时间: 2024-02-23 18:31:08 浏览: 105

要将 `plt` 绘制的图传到前端 `HTML` 页面中，可以使用 `canvas` 标签来实现。具体步骤如下： 1. 在 `views.py` 中使用 `plt` 绘制图像，然后将图像保存到本地磁盘上。 ```python import matplotlib.pyplot as plt def draw_chart(request): x = [1, 2, 3, 4, 5] y = [10, 8, 6, 4, 2] plt.plot(x, y) plt.savefig('static/images/chart.png') # 将图像保存到本地 return render(request, 'chart.html') ``` 2. 在 `HTML` 页面中使用 `canvas` 标签显示图像。 ```html <!DOCTYPE html> <html> <head> <title>Django Chart Example</title> </head> <body> <h1>Chart Example</h1> <canvas id="chart"></canvas> <script> var canvas = document.getElementById('chart'); var context = canvas.getContext('2d'); var img = new Image(); img.onload = function() { context.drawImage(img, 0, 0); }; img.src = "/static/images/chart.png"; // 图像的 URL 地址 </script> </body> </html> ``` 在 `script` 标签中，通过 `Image` 对象加载图像，并在 `canvas` 中绘制图像。需要注意的是，图像的 URL 地址应该与 `views.py` 中保存图像时的路径相同。最后，将上述 `HTML` 页面作为 `draw_chart` 视图函数的返回结果即可。

阅读全文