如何直接将python图形输出到html网页

Question

我使用不同的库，比如熊猫和numpy来生成数据，最终生成一个图形。

现在，我需要将这个图表显示在一个简单的网页中，它是在HTML中。

注意:我也愿意在HTML中接受用户的2-3输入，然后将这些数据传递给我的python。之后，python文件根据给定的数据(从HTML )生成一个图形，我需要将这个图传递给一个页面。

df[[main_data]].plot()

在这里，main_data是变量，其值来自HTML页面。我正在用SPYDER做python代码。和我没有使用任何框架.

Answer 1

这在某种程度上取决于将图形显示为html的含义。我可以看到几种方法，第一个也是最简单的方法是将图形保存为PNG，然后在html中提供文件的路径：

Python代码：

import pandas as pd
import matplotlib.pyplot as plt

s = pd.Series([1, 2, 3])
fig, ax = plt.subplots()
s.plot.bar()
fig.savefig('my_plot.png')

HTML：

<img src='my_plot.png'/>

第二种方法是将图形编码为base64。这具有可移植性的优点，以及制作非常大的难以处理的html文件的缺点。我不是一个网页程序员，所以可能有其他的警告，以及我不知道。

python：

import io
import base64

def fig_to_base64(fig):
    img = io.BytesIO()
    fig.savefig(img, format='png',
                bbox_inches='tight')
    img.seek(0)

    return base64.b64encode(img.getvalue())

encoded = fig_to_base64(fig)
my_html = '<img src="data:image/png;base64, {}">'.format(encoded.decode('utf-8'))

my_html可以传递给你的html文件，或者你可以用jinja2或者任何你使用的东西注入它。下面是关于在html base64中查看https://stackoverflow.com/a/8499716/3639023并将图像编码为base64 如何将PIL Image.image对象转换为base64字符串？的帖子

Answer 2

将matplotlib图表导出到web浏览器的最佳方法是使用mpld3库。这里是一个例子.

import matplotlib.pyplot as plt
import numpy as np
import pandas as pd
import mpld3
from mpld3 import plugins
np.random.seed(9615)

# generate df
N = 100
df = pd.DataFrame((.1 * (np.random.random((N, 5)) - .5)).cumsum(0),
                  columns=['a', 'b', 'c', 'd', 'e'],)

# plot line + confidence interval
fig, ax = plt.subplots()
ax.grid(True, alpha=0.3)

for key, val in df.iteritems():
    l, = ax.plot(val.index, val.values, label=key)
    ax.fill_between(val.index,
                    val.values * .5, val.values * 1.5,
                    color=l.get_color(), alpha=.4)

# define interactive legend

handles, labels = ax.get_legend_handles_labels() # return lines and labels
interactive_legend = plugins.InteractiveLegendPlugin(zip(handles,
                                                         ax.collections),
                                                     labels,
                                                     alpha_unsel=0.5,
                                                     alpha_over=1.5, 
                                                     start_visible=True)
plugins.connect(fig, interactive_legend)

ax.set_xlabel('x')
ax.set_ylabel('y')
ax.set_title('Interactive legend', size=20)

mpld3.show()

https://mpld3.github.io/quickstart.html

Answer 3

您也可以为此使用Plotly。这提供了更多的interactive graphs。还可以用HTML files, apply bootstrap styling编写生成的数据。

看看本教程在他们的网站上。