Методичка по проектному семинару

Для генерации HTML-страницы и генерации графиков предлагается использовать следующие библиотеки: jinja2 и ploty. Вместо плоти можно использовать matplotlib или например seaborn.

Рассмотрим Jinja2 - это удобный HTML-шаблонизатор, он позволяет создать шаблон, а затем генерировать HTML-код с данными.

Например, данный код генерирует страничку из шаблона, а затем сохраняет ее.

from jinja2 import Template

html = open('template.html').read() #чтение шаблона
template = Template(html) #шаблонизация

with open('./index.html', 'w') as fh: #сохранение сгенерированного html
    fh.write(template.render())

Так, но что есть template.html и зачем он нужен?

На самом деле, чтобы вывести на экран браузера страницу мы в любом случае прибегаем к HTML. Для выполнения данной работы не требуется знание html, однако его основы нам сильно пригодятся. Более подробно про html и его устройство можно прочитать тут (https://webref.ru/course/html-tutorial/introduction), либо посмотреть любой туториал на ютубе.

Давайте рассмотрим структуру нашего template, как пример:

<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <title>Проектный сем</title>
	</head>
	<body>
		<div>{{mark}}</div>
		<div>{{plot}}</div>
	</body>
</html>

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

Однако в коде выше мы только сохраняем файл, не изменяя значения шаблона. Давайте это изменим. Более подробно про jinja2 можно прочитать тут https://pythonru.com/uroki/7-osnovy-shablonizatora-jinja.

from jinja2 import Template
import plotly.graph_objects as go

html = open('template.html').read()
template = Template(html)

with open('./index.html', 'w') as fh:
    fh.write(template.render(mark="Оценка", plot="График"))

В итоге, наш html файл будет иметь следущий вид:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Проектный сем</title>
</head>
<body>
<div>Оценка</div>
<div>График</div>
</body>
</html>

После того, как мы научились генерировать странички, давайте рассмотрим процесс создания графика и добавление его в html.

Давайте построим график функции $f(x) = x^2$ от 0 до 5 с шагом 0.1.

import numpy as np
import plotly.graph_objects as go

x = np.arange(0, 5, 0.1)
def f(x):
    return x**2

fig = go.Figure([go.Scatter(x=x, y=f(x))])
fig.show()

В итоге мы получаем вот такой график

Untitled

График интерактивный, его можно уменьшать, увеличивать, смотреть значения

Untitled