如何使用烧瓶将数据传递给 chart.js？答案

【问题标题】：How could I pass data to chart.js with flask?如何使用烧瓶将数据传递给 chart.js？
【发布时间】：2021-02-28 14:23:56
【问题描述】：

我最近尝试用烧瓶制作仪表板，其中包含来自 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>

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

【问题讨论】：

我对python有一点了解，通常在js中for循环用于迭代它不会返回一个数组，我觉得你可以检查一下
只是尝试而不是循环传递数据集和标签作为这样的数组，并在 python 代码中创建数组。 => return render_template("dashboard.html", dashDatas = dashDatas, labels = labels, datasets = datasets)
附上生成的 HTML 会有所帮助。
能否请您包含print(dashDatas) 的输出（如果很长，则粘贴bin 链接）

标签： javascript python flask jinja2 pymongo

【解决方案1】：

我的方法是将标签和数据存储在 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 }}
  }]
});

【讨论】：

太棒了！你能接受答案以便其他人也能找到吗？
如果您想单独拥有一个.js 文件，解决方案是什么？这个 jinja 模板仅在我假设的 html 文件中受支持。
您可以将文件包含在模板的<script> 标记中，并将其中定义的列表传递给ChartJS data 键。确保在引用之前加载您的 .js 文件，否则您将得到一个空图表。

【解决方案2】：

chartjs 版本（库）1 在可用性方面与版本 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

【讨论】：