Press "Enter" to skip to content

3种将Matplotlib图表嵌入HTML页面的方法

数据可视化,Web应用

如何将Matplotlib图表导入HTML文件的教程

Image by Author

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()

下图显示了生成的图表:

Image by Author

使用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。如果在浏览器中打开它,您将看到以下图表:

Image by Author

图表与原始图表略有不同,因为它是原始图表的D3.js版本。这意味着mpld3库将原始图形转换为D3.js。如果检查您的浏览器中的HTML文件,您将看到图表是一个SVG图像,如下图所示:

Image by Author

将生成的图表嵌入到另一个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上关注我
Leave a Reply

Your email address will not be published. Required fields are marked *