Как добавить графики в приложения Flask?

В этой статье мы будем использовать фреймворк Flask для создания нашего веб-приложения на Python. Библиотека Bokeh будет использоваться для создания интерактивных гистограмм, и мы будем визуализировать этот график с помощью простой HTML-страницы внешнего интерфейса. Для этого мы сначала напишем конечные точки во Flask, которые помогут нам создавать диаграммы боке, а затем мы создадим шаблоны HTML, которые будут использовать эти диаграммы боке для отображения их пользователю. Прежде чем двигаться, давайте разберемся с основными технологиями, которые мы будем использовать в этой статье.

Flask — это веб-фреймворк, предлагающий библиотеки для создания простых веб-приложений на Python. Он построен с использованием механизма шаблонов Jinja2 и инструментов WSGI. Flask считается микрофреймворком. Интерфейс шлюза веб-сервера, иногда известный как WSGI, является стандартом для создания веб-приложений на Python. Он считается спецификацией общего интерфейса между веб-приложением и сервером. Jinja2 — это механизм веб-шаблонов, который отображает динамические веб-страницы, объединяя шаблон с определенным источником данных. Вы можете установить Flask с помощью pip :

pip install flask==2.2.2

Для создания интерактивных визуализаций для современных веб-браузеров хорошим выбором будет библиотека Python Bokeh. Он позволяет создавать потрясающие визуализации, от простых графиков до сложных информационных панелей с потоковыми наборами данных. Без самостоятельного написания JavaScript вы можете создавать визуализации на основе JavaScript с помощью Bokeh. вы можете установить Bokeh с помощью pip:

pip install bokeh==3.0.1

Другой способ добавления графиков в приложения Flask — использование JS-библиотек для построения диаграмм с открытым исходным кодом, таких как Chart.js. Мы можем передать необходимые данные для создания этих диаграмм из приложения Flask. Чтобы включить Chart.js на свой HTML-сайт, вы можете использовать следующий CDN:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Добавьте графики в Flask, используя библиотеку JavaScript Chart.js

Шаг 1: Здесь мы определили две переменные, а именно «метки» и «данные». Эти переменные передаются в шаблон HTML, chartjs-example.html. Этот шаблон HTML, как определено ниже, должен быть помещен в каталог шаблонов корневой папки с указанным именем.

Python3

# Importing required functions

from flask import Flask, render_template

# Flask constructor

app = Flask(__name__)

# Root endpoint

@app.route('/')

def homepage():

    # Define Plot Data

    labels = [

        'January',

        'February',

        'March',

        'April',

        'May',

        'June',

    ]

    data = [0, 10, 15, 8, 22, 18, 25]

    # Return the components to the HTML template

    return render_template(

        template_name_or_list='chartjs-example.html',

        data=data,

        labels=labels,

    )

# Main Driver Function

if __name__ == '__main__':

    # Run the application on the local development server ##

    app.run(debug=True)

Шаг 2: В нашем HTML-шаблоне мы используем нотацию Jinja2, т. е. для упоминания переменных списка Python мы используем синтаксис {{имя_переменной | тойсон }}. Это передаст значение из приложения Flask в шаблон HTML и, в частности, в наш сценарий JS. Таким образом, любые данные, подготовленные в приложении Flask, можно использовать в библиотеках диаграмм JS с открытым исходным кодом.

HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <title>Chartjs Charts</title>

</head>

<body>

    <div style="height: 50vh; width: 50%;">

        <canvas id="myChart"></canvas>

    </div>

    <script>

        const labels = {{ labels | tojson}};

        const data = {

            labels: labels,

            datasets: [{

                label: 'Sales',

                backgroundColor: 'rgb(255, 99, 132)',

                borderColor: 'rgb(255, 99, 132)',

                data: {{ data | tojson}},

            }]

        };

        const config = {

            type: 'line',

            data: data,

            options: { maintainAspectRatio: false }

        };

        const myChart = new Chart(

            document.getElementById('myChart'),

            config

        );

    </script>

</body>

</html>

Шаг 3: Чтобы запустить приведенный выше код Flask, мы можем использовать следующую команду (при условии, что ваше имя файла Flask — app.py )

python app.py

Выход:

Добавьте графики в Flask, используя Bokeh

В библиотеке Bokeh есть метод component(), который возвращает HTML-компоненты для встраивания графика Bokeh. Данные для графика хранятся непосредственно в возвращаемом HTML. Возвращаемые компоненты предполагают, что ресурсы BokehJS уже загружены. HTML-документ или шаблон, в который они будут встроены, должны включать теги сценария либо из локального URL-адреса, либо из CDN Bokeh.

<script src="https://cdn.bokeh.org/bokeh/release/bokeh-3.0.1.min.js"></script>

Синтаксис: components(models: Model | Sequence[Model] | dict[str, Model], wrap_script: bool = True, wrap_plot_info: bool = True, theme: ThemeLike = None)

Параметры:

модели(Model|list|dict|tuple: отдельная модель, список/кортеж моделей или словарь ключей и моделей.
wrap_script(логическое значение, необязательный): если значение равно True, возвращаемый javascript помещается в тег script. (по умолчанию: Истина)
wrap_plot_info(логический, необязательный): если True, возвращает строки
theme: В противном случае возвращайте объекты RenderRoot, которые можно использовать для создания собственных элементов div. (по умолчанию: Истина)
theme: представляет собой полный набор корней документа, применяет тему этого документа к компонентам. В противном случае применяется тема по умолчанию.

После определения фигуры Боке и графика рассеяния Боке мы извлекаем из фигуры компоненты script и div для использования в HTML. Переменная script содержит код JS, встроенный в HTML-тег <script>. Что касается переменной ‘div’, она содержит единственный тег HTML <div>, который содержит компонент. Эти два HTML-кода можно использовать с необходимым импортом Bokeh для добавления графиков в наши приложения Flask.

# Importing required functions

import random

from flask import Flask

from bokeh.embed import components

from bokeh.plotting import figure

# Flask constructor

app = Flask(__name__)

# Root endpoint

@app.route('/')

def homepage():

    # Creating Plot Figure

    p = figure(height=350, sizing_mode="stretch_width")

    # Defining Plot to be a Scatter Plot

    p.circle(

        [i for i in range(10)],

        [random.randint(1, 50) for j in range(10)],

        size=20,

        color="navy",

        alpha=0.5

    )

    # Get Chart Components

    script, div = components(p)

    # Return the components to the HTML template

    return f'''

    <html lang="en">

        <head>

            <script src="https://cdn.bokeh.org/bokeh/release/bokeh-3.0.1.min.js"></script>

            <title>Bokeh Charts</title>

        </head>

        <body>

            <h1>Add Graphs to Flask apps using Python library - Bokeh</h1>

            { div }

            { script }

        </body>

    </html>

    '''

# Main Driver Function

if __name__ == '__main__':

    # Run the application on the local development server

    app.run(debug=True)