Я использую разные библиотеки, такие как pandas и numpy, для генерации фрейма данных, который в итоге генерирует граф.

Теперь мне нужно показать этот график на простой веб-странице в формате HTML.

Примечание. Я также хочу получить 2-3 ввода от пользователя на странице HTML, а затем передать эти данные в мой файл python. После этого файл python генерирует график на основе заданных данных (со страницы HTML), и мне нужно передать этот график на страницу HTML.

df[[main_data]].plot()

Здесь main_data - это переменная, значение которой берется со страницы HTML. И я делаю код Python в SPYDER. И я не использую Framework.

13
Jay Desai 27 Фев 2018 в 21:51

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 или чего-либо еще, что вы используете. Вот ТАК сообщение о просмотре base64 в html https://stackoverflow.com/a/8499716/3639023 и кодировании изображений в виде base64 Как преобразовать объект PIL Image.image в строку base64 ?

7
johnchase 27 Фев 2018 в 19:47

Лучший способ экспортировать диаграммы matplotlib в веб-браузер - использовать библиотеку 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

1
Noor Ameen 29 Дек 2019 в 07:36

Вы можете сохранить график в определенном месте и написать скрипт для чтения файла изображения, скажем pic.png в HTML. Для получения ввода вы можете создать Tabular структуру данных и после каждого ввода сохранять данные в файл, скажем file.csv и читать их в Python и продолжать добавлять значения из ввода ,

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

Теперь создайте HTML-код, чтобы прочитать этот файл изображения и вывести его, как вы хотите. Надеюсь, это поможет.

0
Skippy le Grand Gourou 12 Янв 2020 в 18:56