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

навигации в 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 = [, 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 с открытым исходным кодом.

Читайте также:  Что такое язык XML

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, мы можем использовать следующую

Добавьте графики в 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: представляет собой полный набор корней документа, применяет тему этого документа к компонентам. В противном случае применяется тема по умолчанию.
Читайте также:  Как сделать подсветку синтаксиса HTML внутри строк PHP?

После определения фигуры Боке и графика рассеяния Боке мы извлекаем из фигуры компоненты 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)

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

Python bokeh_charts.py

Выход:

Вывод при просмотре в браузере по ссылке http://127.0.0.1:5000/ будет выглядеть так

Вывод при просмотре в браузере по ссылк

Оцените статью
bestprogrammer.ru
Добавить комментарий

Adblock
detector