Использование данных, сохраненных как переменная в HTML из Python

Для новичков, которые пытаются объединить Flask и ChartJS, общий подход, похоже, заключается в написании кода Jinja, который использует циклы для вывода Javascript, или вручную использует выражения Jinja в JS. Это может быстро превратиться в кошмар обслуживания.

Вот мой подход, который позволяет вам определить данные, которые вы хотите отобразить на диаграмме в Python, поместить холст в свой шаблон с минимальным JS, а затем динамически обновлять диаграмму с помощью Javascript Fetch API.

Вы можете клонировать репозиторий flask-chartjs.

У вас может быть один маршрут, который отображает страницу, содержащую диаграмму:

@app.route('/')
def index():
    return render_template('index.html', CHART_ENDPOINT = url_for('data'))

CHART_ENDPOINT в этом случае будет /data, что соответствует другому маршруту, который возвращает JSON. У меня также есть вспомогательная функция, которая преобразует время эпохи в формат, совместимый с ISO 8601, который работает с моментом.

import datetime as DT
def conv(epoch):
    return DT.datetime.utcfromtimestamp(epoch).isoformat()

@app.route('/data')
def data():
    d = {'datasets':
            [
                {'title': 'From Dict',
                 'data': [ {'x': conv(1588745371), 'y': 400},
                           {'x': conv(1588845371), 'y': 500},
                           {'x': conv(1588946171), 'y': 800} ]
                },
            ]
         }

    return jsonify(d)

Теперь в шаблоне можно разместить элемент холста графика с атрибутом data-endpoint:

<canvas id="canvas" data-endpoint='{{CHART_ENDPOINT}}'></canvas>

Затем я реализовал две функции JS, которые в том же шаблоне позволяют вам создать диаграмму и загрузить данные из предоставленной конечной точки:

<script type='text/javascript'>
    var ctx = document.getElementById('canvas');

    myChart = create_chart(ctx);

    window.onload = function () { 
      load_data(myChart)
    };
</script>

В create_chart функция конечная точка получается из атрибута data-endpoint и добавляется к объекту config до того, как он будет назначен этой диаграмме (кредит):

config.endpoint = ctx.dataset.endpoint;
return new Chart(ctx.getContext('2d'), config);

Затем функция load_data получает доступ к конечной точке из chart.config.endpoint, что означает, что она всегда получает правильные данные для предоставленной диаграммы.

Вы также можете установить единицы времени, когда создание диаграммы:

myChart = create_chart(ctx, 'hour') # defaults to 'day'

Я обнаружил, что обычно это нужно настраивать в зависимости от вашего диапазона данных.

Было бы тривиально изменить этот код, чтобы получить его таким же образом, как и конечную точку, в функции create_chart. Что-то вроде config.options.scales.xAxes[0].time.unit = ctx.datasets.unit, если атрибут был data-unit. Это же можно сделать и для других переменных.

Вы также можете передать строку из внешнего интерфейса при загрузке данных (скажем, dynamicChart — это еще одна диаграмма, созданная с помощью метода, описанного выше):

load_data(dynamicChart, 'query_string')

Это сделало бы 'query_string' доступным в функции flask как request.args.get('q')

Это полезно, если вы хотите реализовать (например) поле ввода текста, которое отправляет строку на серверную часть, чтобы серверная часть могла каким-то образом обработать ее и вернуть настроенный набор данных, который отображается на диаграмме. Маршрут /dynamic в репозитории демонстрирует это.

Вот как это выглядит в рендере:

Как видите, на одной странице также можно разместить несколько диаграмм.

Вы можете использовать ту же функцию шаблонов jinja для доступа к вашей переменной в js.

Возможно, если вам нужны строки, вы должны заключить их вот так "{{variable}}"