我如何使用FASK将数据传递给chart.js？

How could I pass data to chart.js with flask?(我如何使用FASK将数据传递给chart.js？)

问题描述

我最近尝试用Flask制作从MongoDB获取数据的仪表板。但我不能将数据发送到chart.js。我从MongoDB获取数据，并将其发送到javascript，然后尝试使用JJIA2循环数据。

@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>

我拿到的图表是空的。我做错了什么？

推荐答案

我的方法是将标签和数据存储在Flask视图的列表中，传递给模板，然后用tojson过滤将它们转换成json。

假设您的视图中有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 }}
  }]
});

这篇关于我如何使用FASK将数据传递给chart.js？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！