使用 mpld3 输出居中的 HTML 图像

问题描述

我正在使用 mpld3 Python 包将静态 matplotlib 图形保存为 html 格式的交互式图像。一个简单的例子如下：

# draw a static matplotlib figure
import matplotlib.pyplot as plt
import numpy as np

fig = plt.figure()
ax = plt.axes()
x = np.linspace(0,10,1000)
ax.plot(x,np.sin(x))

# save as an interactive html file
import mpld3

html_str = mpld3.fig_to_html(fig)
Html_file= open("sample.html","w")
Html_file.write(html_str)
Html_file.close()

但问题是在浏览器中打开html图片时，总是在左上角。有没有办法让它居中甚至更好地控制输出样式？

解决方法

mpld3.fig_to_html() 只是生成一段 html 片段。虽然单独的片段可以作为一个 html 文档工作，但它应该被嵌入到一个完整的 html 文档中。

以下是使用 fig1 选项为生成的片段指定 id figid 的解决方案示例。为 ID 为 <div> 的 fig1 准备带有 CSS 样式定义的 html 文档。并将片段嵌入到文档中。

html_fragment = mpld3.fig_to_html(fig,figid = 'fig1')

html_doc = f'''
<style type="text/css">
div#fig1 {{ text-align: center }}
</style>

{html_fragment}
'''

Html_file= open("sample.html","w")
Html_file.write(html_doc)
Html_file.close()