如何使用 Flask 将数据传递到 Chart.js?

2024-02-15

我最近尝试使用 Flask 制作仪表板,其中数据来自 mongodb。但我无法将数据发送到 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>

我得到了空图表。我做错了什么?


我的方法是将标签和数据存储在 Flask 视图的列表中,将它们传递给模板并使用以下命令将它们转换为 JSONtojson filter.

假设你有labels = ['a', 'b', 'c'] and 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 }}
  }]
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 Flask 将数据传递到 Chart.js? 的相关文章

随机推荐