使用 mpld3 输出居中的 HTML 图像

Question

我正在使用 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图片时，它总是在左上角。有没有办法让它居中甚至更好地控制输出样式？

Answer 1

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

下面是使用 figid 选项为生成的片段指定 ID fig1 的解决方案示例。正在为具有 ID fig1 的 <div> 准备具有 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()

使用 mpld3 输出居中的 HTML 图像

Output a centred HTML image with mpld3

html

css

matplotlib

python-3.x

mpld3