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

时间:2018-02-27 18:51:53

标签: python html pandas graph

我正在使用不同的库(如pandas和numpy)来生成数据帧,最终生成图表。

现在,我需要将此图表显示为一个HTML格式的简单网页。

注意:我也愿意在HTML页面中从用户那里获取2-3个输入,然后将该数据传递给我的python文件。之后,python文件根据给定的数据(来自HTML页面)生成图表,我需要将此图表传递给HTML页面。

df[[main_data]].plot()

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

4 个答案:

答案 0 :(得分:3)

这在某种程度上取决于您将图表显示为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文件的缺点。我不是网络程序员,所以可能还有其他警告,我不知道

蟒:

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 https://stackoverflow.com/a/8499716/3639023中查看base64并将图片编码为base64 How to convert PIL Image.image object to base64 string?

的帖子

答案 1 :(得分:1)

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

签出this tutorial on their website

答案 2 :(得分:0)

您可能希望将图表保存到特定位置并编写脚本以阅读图像文件,然后将pic.png说成HTML。要获取输入,您可以创建Tabular数据结构,并在每次输入后将数据保存到文件中,让我们说file.csv并在Python中读取它并继续添加输入值。

投票结束 喜爱 3 这是一个简单的代码,它在与代码相同的目录中生成并保存绘图图像。现在,有没有办法可以将它保存在选择的目录中?

import matplotlib.pyplot as plt
df.hist()
plt.savefig('path/to/pic.png')

现在创建HTML代码以读取该图像文件并根据需要输出。我希望这会有所帮助。

答案 3 :(得分:0)

将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