数据可视化,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-scrip
t标记包含您的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上关注我