Как я мог передавать данные в chart.js с фляжкой?

#javascript #python #flask #jinja2 #pymongo

Вопрос:

Недавно я пытался создать панель мониторинга, которая содержит данные из mongodb с помощью flask. Но я не могу отправлять данные в chart.js . Я получил данные из mongodb и отправил в javascript и попытался выполнить цикл данных с помощью jinja2.

 @app.route("/dashboard")
def dashboard():
    limit = request.args.get("limit",12,type=int)
    dashboardDatas = mongo.db.dashBoard
    dashDatas = dashboardDatas.find().limit(limit)

    return render_template("dashboard.html", dashDatas = dashDatas)

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

        <script>
            var ctx = document.getElementById('myChart').getContext('2d');
            var myChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: [ {% for item in dashDatas %} 
                                '{{item._id}}', 
                                {% endfor %} ],
                    datasets: [{
                        label: '# of Votes',
                        data: [ {% for item in dashDatas %}
                                {{item.logistic}},
                                {% endfor %}],
                        borderColor: [
                            'rgba(255, 99, 132, 1)',
                        ],
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                        ],
                        borderWidth: 0.5
                    }]
                },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true
                            }
                        }]
                    }
                }
            });
            </script>

И я получил пустую диаграмму. Что я сделал не так?

1. У меня есть немного знаний в python, обычно в js цикл for используется для итерации, он не вернет массив обратно, я чувствую, что вы можете это проверить

2. Просто попробуйте вместо цикла передать наборы данных и метки в виде массива примерно так, и создайте массив в коде python. => вернуть render_template(«dashboard.html «, dashDatas = dashDatas, метки = метки, наборы данных = наборы данных)

3. Это помогло бы, если бы вы прикрепили сгенерированный HTML.

4. Не могли бы вы, пожалуйста, включить вывод print(dashDatas) (ссылка на вставку, если длинная)

Ответ №1:

Мой подход заключается в том, чтобы хранить метки и данные в списках в представлении Flask, передавать их в шаблон и преобразовывать их в JSON с tojson помощью фильтра.

Предположим, у вас есть labels = ['a', 'b', 'c'] и data = [1, 2, 3] , по вашему мнению. Вы можете передать их в Chart.js в вашем шаблоне как

 let chart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: {{ labels|tojson }},
    datasets: [{
      label: 'My 1st dataset',
      backgroundColor: 'rgb(255, 99, 132)',
      borderColor: 'rgb(255, 99, 132)',
      data: {{ data|tojson }}
  }]
});

1. Отлично! Можете ли вы принять ответ, чтобы другие тоже могли его найти?

2. Каким будет решение, если вы хотите иметь .js файл отдельно? Я полагаю, что этот шаблон jinja поддерживается только в HTML-файлах.

3. Вы должны включить свой файл в <script> тег в своем шаблоне и передать определенный в нем список в data ключ ChartJS. Убедитесь, что ваш .js файл загружен, прежде чем ссылаться на него, иначе вы получите пустую диаграмму.

Ответ №2:

Версия (библиотека) 1 chartjs имеет важные отличия от версии 2 с точки зрения удобства использования. Хорошие ссылки: . версия 1: https://blog.ruanbekker.com/blog/2017/12/14/graphing-pretty-charts-with-python-flask-and-chartjs / . версия 2: https://towardsdatascience.com/flask-and-chart-js-tutorial-i-d33e05fba845