Блог

Главная - Вопросы по программированию - я получаю ошибку, когда запускаю приложение flask с python для построения графиков в веб-интерфейсе

я получаю ошибку, когда запускаю приложение flask с python для построения графиков в веб-интерфейсе

#javascript #python #flask

Вопрос:

Я намерен построить линейный график на веб-странице, используя колбу и charts.js Я всего лишь новичок, поэтому я перешел по ссылке(https://www.youtube.com/watch?v=E2hytuQvLlEamp;lc=UgzWBrS2GEx1BnNgs2V4AaABAg) для реализации этой программы, но она не работает, ошибка на веб-странице упоминается в конце вопроса.

Это мой код на python

 from flask import Flask, render_template

app = Flask(__name__)


@app.route("/home")
def home():
    plot_data = [
        ("3-01-2020", 6),
        ("3-02-2020", 13),
        ("3-03-2020", 14),
        ("3-04-2020", 41),
        ("1-05-2020", 10),
        ("3-06-2020", 0),
        ("3-07-2020", 16),
        ("3-08-2020", 10),
        ("3-09-2020", 17),
        ("3-10-2020", 19),
    ]
    labels = []
    values = []
    for row in plot_data:
        labels.append(row[1])
        values.append(row[0])

    return render_template('graph.html', lables=labels, values=values)


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

Это мой HTML-код.

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart view</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.2/chart.min.js"></script>
</head>
<body>
    <canvas id = "voltage_graph" width="900" height="400"></canvas>
    <script>
        var ctx = document.getElementById("voltage_graph").getContext("2d");
        var lineChart = new Chart(ctx,{
            type: "line",
            data:{
                labels: {{labels | safe}}
                datasets: [
                    {
                        label: "BMS_CELL_01_voltage",
                        data:  {{values | safe}},
                        fill : false,
                        borderColor:"rgb(75,192,192)",
                        lineTension: 0.1
                    }
                ]
            },
            Options:{
                responsive: false
            }
        });
    </script>
</body>
</html>

Это мой вывод терминала

 C:UsersrohitAppDataLocalProgramsPythonPython37python.exe C:/Users/rohit/PycharmProjects/flask-projects/applicaton.py
 * Serving Flask app 'application (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: on
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 275-482-683
 * Running on http://127.0.0.1:5000/ (Press CTRL C to quit)

введите описание изображения здесь

когда я запускаю это, все, что я получаю, — это ошибка на веб-сайте, указывающая, как указано выше
любая помощь будет признательна, заранее спасибо.

Комментарии:

1. @app.route("/home") маршрут есть /home , и вы положили 127.0.0.1:5000 , что он должен быть 127.0.0.1:5000/home

2. но сейчас я получаю пустой экран

3. щелкните правой view page resource кнопкой мыши, щелкните и проверьте, получаете ли вы нужную страницу или нет.

4. я получаю страницу, но на ней написано Неперехваченная ошибка синтаксиса: Неожиданный токен ‘:’ главная страница:18

Ответ №1:

Несколько проблем в коде, который вы опубликовали:

  • lables= неправильно прописано app.py , должно быть labels=
  • labels.append(row[1]) следует использовать row[0] , предполагая, что вы хотите, чтобы даты использовались в качестве меток (и наоборот, где values следует использовать row[1] вместо этого)
  • labels: {{labels | safe}} отсутствует запятая в конце

Как только вы устраните эти проблемы, ваш график отобразится при переходе к localhost:5000/home .

ИЗМЕНИТЬ: Для полноты картины, вот рабочий код. В app.py :

 from flask import Flask, render_template

app = Flask(__name__)


@app.route("/home")
def home():
    plot_data = [
        ("3-01-2020", 6),
        ("3-02-2020", 13),
        ("3-03-2020", 14),
        ("3-04-2020", 41),
        ("1-05-2020", 10),
        ("3-06-2020", 0),
        ("3-07-2020", 16),
        ("3-08-2020", 10),
        ("3-09-2020", 17),
        ("3-10-2020", 19),
    ]
    labels = []
    values = []
    for row in plot_data:
        labels.append(row[0])
        values.append(row[1])

    print(labels)
    print(values)
    return render_template('graph.html', labels=labels, values=values)


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

И в templates/graph.html :

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart view</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.2/chart.min.js"></script>
</head>
<body>
    <canvas id = "voltage_graph" width="900" height="400"></canvas>
    <script>
        var ctx = document.getElementById("voltage_graph").getContext("2d");
        var lineChart = new Chart(ctx,{
            type: "line",
            data:{
                labels: {{labels | safe}},
                datasets: [
                    {
                        label: "BMS_CELL_01_voltage",
                        data:  {{values | safe}},
                        fill : false,
                        borderColor:"rgb(75,192,192)",
                        lineTension: 0.1
                    }
                ]
            },
            Options:{
                responsive: false
            }
        });
    </script>
</body>
</html>
Метки: ,