数据可视化，Web应用
如何将Matplotlib图表导入HTML文件的教程
Python提供了许多库来执行不同的操作，包括数据可视化。然而，您可能会发现将使用Matplotlib构建的图表集成到HTML页面中很复杂。最简单的解决方案是将图表导出为静态图像，例如PNG或JPEG，然后将其集成到您的HTML页面中。但是，如果使用静态图像，则会失去原始图表的任何可能的交互性。
另一个解决方案可能是使用Streamlit或Flask等外部框架，但在这两种情况下，您必须设置一个独立的Web服务器来服务于您的图像。这个解决方案可能过于昂贵。在我们的城镇，我们说我们用大炮打苍蝇！
本文介绍了将Matplotlib图表嵌入HTML页面的三种策略。这三种解决方案是：
- 使用mpld3库
- 将图像编码为base64
- 使用
py-script。
在描述每个解决方案之前，让我们描述一下我们将用来演示三种情况的情境。
情境
假设我们想使用Matplotlib绘制正弦曲线。以下是生成图表的代码：
import numpy as npimport matplotlib.pyplot as plt# 生成从0到2π的x，步长为0.1x = np.arange(0, 2*np.pi, 0.1)y = np.sin(x)fig, ax = plt.subplots()ax.plot(x, y)ax.set_xlabel('x')ax.set_ylabel('y')ax.set_title('正弦曲线')plt.show()下图显示了生成的图表：
使用mpld3库
mpld3库结合了Matplotlib和D3.js，一种流行的用于数据可视化的Javascript库。Mpld3提供了一个API来将Matplotlib图表导出为D3.js。
首先，安装mpld3库：
pip install mpld3要将Matplotlib图表保存为HTML页面，请使用mtpld3提供的save_html()函数，如下所示：
import mpld3import numpy as npimport matplotlib.pyplot as plt# 生成从0到2π的x，步长为0.1x = np.arange(0, 2*np.pi, 0.1)y = np.sin(x)# 创建一个图和轴fig, ax = plt.subplots()# 绘制正弦曲线ax.plot(x, y)# 设置标签和标题ax.set_xlabel('x')ax.set_ylabel('y')ax.set_title('正弦曲线')# 显示图表mpld3.save_html(fig,'fig.html')save_html()函数接收Matplotlib图形作为输入和图形名称。该脚本生成fig.html。如果在浏览器中打开它，您将看到以下图表：
图表与原始图表略有不同，因为它是原始图表的D3.js版本。这意味着mpld3库将原始图形转换为D3.js。如果检查您的浏览器中的HTML文件，您将看到图表是一个SVG图像，如下图所示：
将生成的图表嵌入到另一个HTML页面中，将生成的文件内容精确地复制到要包含图像的位置即可。有关详细信息，请参阅我的先前的教程。
将图像编码为base64
另一种解决方案是将Matplotlib图形编码为base64图像，如此Stack Overflow thread中所述。这是生成包含Matplotlib图像的HTML页面的代码：
import base64from io import BytesIOimport numpy as npimport matplotlib.pyplot as pltx = np.arange(0, 2*np.pi, 0.1)y = np.sin(x)fig, ax = plt.subplots()ax.plot(x, y)ax.set_xlabel('x')ax.set_ylabel('y')ax.set_title('Sinusoid')tmpfile = BytesIO()fig.savefig(tmpfile, format='png')encoded = base64.b64encode(tmpfile.getvalue()).decode('utf-8')html = '<html>' + '<img src=\'data:image/png;base64,{}\'>'.format(encoded) + '</html>'with open('fig2.html','w') as f: f.write(html)实际上，您会生成一个BytesIO()对象，并使用PNG格式保存图。然后使用b64encode()函数对图像进行编码，使用decode()函数进行解码。最后，将解码的图像添加到HTML字符串并保存。结果，您会得到与原始Matplotlib图形精确相同的图形。
使用py-script
Py-script是一个JavaScript库，使您可以直接将Python代码包含到HTML页面中。要使用Py-script，您必须在HTML标题中包含以下Py-script库：
<head> <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" /> <script defer src="https://pyscript.net/latest/pyscript.js"></script></head>然后，使用py-config标记安装所需的Python库：
<py-config> packages = ["matplotlib", "numpy"]</py-config>最后，使用py-script标记包含您的Python代码：
<py-script> import numpy as np import matplotlib.pyplot as plt x = np.arange(0, 2*np.pi, 0.1) y = np.sin(x) fig, ax = plt.subplots() ax.plot(x, y) ax.set_xlabel('x') ax.set_ylabel('y') ax.set_title('Sinusoid') display(fig, target="graph-area", append=False) </py-script> <div id="graph-area"></div>要显示图形，请使用display()函数，该函数接收Matplotlib图形、要包含绘图的HTML div以及是否使用append模式。
最终结果是，您会得到与原始图形完全相同的图形。
总结
恭喜您！您刚刚学会了三种将Matplotlib图表包含到HTML页面中的方法！三种策略是：
- 使用mpld3库将Matplotlib图表转换为D3.js图表
- 将图像编码为base64，生成Matplotlib图表的PNG图像作为base64编码图像，然后将其包含到HTML页面中
- 使用
py-script使您可以直接在HTML中包含Python代码。
相关文章
如何将Python图表插入HTML网站
towardsdatascience.com
3种在Python Altair中构建地理地图的方法
一个数据可视化教程，介绍如何在Python Altair中构建三种不同的地图：区域地图、点密度地图…
towardsdatascience.com
3种你可能不知道的可视化时间序列的方式
一个关于如何在Python和Altair中可视化时间序列的即插即用教程
towardsdatascience.com
保持联系！
- 在小猪AI上关注我
- 订阅我的新闻简报
- 在LinkedIn上联系我
- 在Twitter上关注我
- 在Facebook上关注我
- 在Github上关注我