Несколько способов динамического отображения данных диаграммы Pyecharts с помощью Flask

Flask

В этой статье будет рассказано, как использовать графические диаграммы инструмента визуализации в веб-фреймворке Flask. Прочитав этот учебник, вы освоите несколько методов динамического отображения визуальных данных. Если вы не можете, приходите ко мне...

Рендеринг шаблона фляги

1. Создайте новый проект flask-charts

Выберите Новый проект в редакторе, затем выберите Flask, После создания Pycharm поможет нам создать сценарий запуска и папку шаблона.

2. Скопируйте шаблон круговых диаграмм

Ссылка на следующий шаблон по ссылке ├── jupyter_lab.html ├── jupyter_notebook.html ├── макрос ├── interact.html ├── simple_chart.html ├── simple_page.html └── table.html Скопировать все в папку tempaltesGitHub.com/P также в чартах/Боюсь…

3. Визуализировать диаграмму

Основная цель — вернуть данные диаграммы, сгенерированные pyecharts, в функцию просмотра, поэтому мы модифицируем код непосредственно в app.py следующим образом:

from flask import Flask
from jinja2 import Markup


from pyecharts import options as opts
from pyecharts.charts import Bar

app = Flask(__name__, static_folder="templates")


def bar_base() -> Bar:
    c = (
        Bar()
            .add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
            .add_yaxis("商家A", [5, 20, 36, 10, 75, 90])
            .add_yaxis("商家B", [15, 25, 16, 55, 48, 8])
            .set_global_opts(title_opts=opts.TitleOpts(title="Bar-基本示例", subtitle="我是副标题"))
    )
    return c


@app.route("/")
def index():
    c = bar_base()
    return Markup(c.render_embed())


if __name__ == "__main__":
    app.run()

Запустите его напрямую, введите адрес в браузере и отобразите данные напрямую.

Это очень простое отображение статических данных, не волнуйтесь, шоу еще впереди~

Разделение передней и задней частей колбы

Вышеупомянутый метод отображения статических данных Основная цель объединения pyecharts и Flask — реализовать функцию динамического обновления данных, пошагового обновления данных и т. д.! Основываясь на объясненном выше содержимом, создайте новый файл index.html в папке шаблонов, который в основном использует зависимости echarts.min.js, управляемые jquery и pyecharts.

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动态更新数据</title>
    <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
</head>
<body>
    <div id="bar" style="width:1000px; height:600px;"></div>
    <script>
      (
        function () {
            var result_json = '{{ result_json|tojson }}';
            // var result = JSON.parse(result_json);
            var chart = echarts.init(document.getElementById('bar'), 'gray', {renderer: 'canvas'});
            $.ajax({
                type: "GET",
                url: "http://127.0.0.1:5000/barChart",
                dataType: 'json',
                data: {result: result_json},
                success: function (result) {
                    chart.setOption(result);
                }
            });
        }
    )
    </script>
</body>
</html>

Друзья с html Foundation должны знать, что этот код в основном отправляет запрос на адрес "127.0.0.1:5000/barChart", поэтому нам также необходимо внести соответствующие изменения в app.py, добавить функцию маршрутизации этого адреса, чтобы реализовать динамическое обновление данных. Часть кода выглядит следующим образом:

@app.route("/")
def index():
    data = request.args.to_dict()
    return render_template("index.html", result_json=data)

@app.route("/barChart")
def get_bar_chart():
    args = request.args.to_dict()
    result = eval(args.get("result"))
    name = result.get("name")
    subtitle = result.get("subtitle")
    c = bar_base(name, subtitle)

    return c.dump_options_with_quotes()

Получите параметры, переданные браузером в функции просмотра индекса, а затем передайте их в index.html. Это всего лишь простой пример, поэтому проверка параметров не выполняется. Другая функция просмотра в основном получает параметры и передает их в функцию построения диаграммы bar_base(), чтобы реализовать динамическое отображение данных диаграммы в соответствии с параметрами, переданными по URL-адресу. Результат выглядит следующим образом:

Это простая демонстрация, поэтому в качестве динамического параметра используется только заголовок диаграммы. Этот сценарий подходит для первого запроса на получение нужных нам данных, а затем на их отображение. Например, визуализация данных игрока NBA, которую я написал ранее.Tickets.WeChat.QQ.com/Yes/www cnfan46CH…

Python获取NBA历史巨星和现役所有球员生涯数据曲线

Это метод, разные игроки отображают соответствующие данные игрока!

Регулярно обновлять график в полном объеме

В этом сценарии клиентская часть активно обновляет данные на серверной части.Основой обновления синхронизации является метод HTML setInterval. Тогда код index.html выглядит следующим образом:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Awesome-pyecharts</title>
    <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>

</head>
<body>
    <div id="bar" style="width:1000px; height:600px;"></div>
    <script>
        var chart = echarts.init(document.getElementById('bar'), 'white', {renderer: 'canvas'});

        $(
            function () {
                fetchData(chart);
                setInterval(fetchData, 2000);
            }
        );

        function fetchData() {
            $.ajax({
                type: "GET",
                url: "http://127.0.0.1:5000/barChart",
                dataType: 'json',
                success: function (result) {
                    chart.setOption(result);
                }
            });
        }
    </script>
</body>
</html>

Соответственно, измените bar_base() в app.py соответствующим образом, чтобы полностью обновлять график через равные промежутки времени.

def bar_base() -> Bar:
    c = (
        Bar()
            .add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
            .add_yaxis("商家A", [random.randint(10, 100) for _ in range(6)])
            .add_yaxis("商家B", [random.randint(10, 100) for _ in range(6)])
            .set_global_opts(title_opts=opts.TitleOpts(title="", subtitle=""))
    )
    return c

@app.route("/")
def index():
    return render_template("index.html")

@app.route("/barChart")
def get_bar_chart():
    c = bar_base()
    return c.dump_options_with_quotes()

После запуска открываем в браузере, эффект такой:

定时更新图表

Глядя на эту движущуюся картинку, есть ли что-то вроде..., если я ди-джей, Ци, ты такой красивый...

Инкрементальное обновление диаграммы по времени

Аналогичным образом внесите изменения в index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Awesome-pyecharts</title>
    <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>

</head>
<body>
    <div id="bar" style="width:1000px; height:600px;"></div>
    <script>
        var chart = echarts.init(document.getElementById('bar'), 'white', {renderer: 'canvas'});
        var old_data = [];
        $(
            function () {
                fetchData(chart);
                setInterval(getDynamicData, 2000);
            }
        );

        function fetchData() {
            $.ajax({
                type: "GET",
                url: "http://127.0.0.1:5000/lineChart",
                dataType: "json",
                success: function (result) {
                    chart.setOption(result);
                    old_data = chart.getOption().series[0].data;
                }
            });
        }

        function getDynamicData() {
            $.ajax({
                type: "GET",
                url: "http://127.0.0.1:5000/lineDynamicData",
                dataType: "json",
                success: function (result) {
                    old_data.push([result.name, result.value]);
                    chart.setOption({
                        series: [{data: old_data}]
                    });
                }
            });
        }

    </script>
</body>
</html>

Инкрементное обновление, внутренний код также необходимо изменить соответствующим образом.

from pyecharts.charts import Line

def line_base() -> Line:
    line = (
        Line()
        .add_xaxis(["{}".format(i) for i in range(10)])
        .add_yaxis(
            series_name="",
            y_axis=[randrange(50, 80) for _ in range(10)],
            is_smooth=True,
            label_opts=opts.LabelOpts(is_show=False),
        )
        .set_global_opts(
            title_opts=opts.TitleOpts(title="动态数据"),
            xaxis_opts=opts.AxisOpts(type_="value"),
            yaxis_opts=opts.AxisOpts(type_="value"),
        )
    )
    return line

@app.route("/")
def index():
    return render_template("index.html")

@app.route("/lineChart")
def get_line_chart():
    c = line_base()
    return c.dump_options_with_quotes()

idx = 9

@app.route("/lineDynamicData")
def update_line_data():
    global idx
    idx = idx + 1
    return jsonify({"name": idx, "value": randrange(50, 80)})

Поехали, посмотрим эффект

Спасибо за чтение и подписку!