时间戳

首页 > 解决方案 > 将数据（从 SQLite 查询中获取）从 Flask 发送到 Javascript 以创建图表

javascript - 将数据（从 SQLite 查询中获取）从 Flask 发送到 Javascript 以创建图表

问题描述

在查询我的数据库后，我有一个数据数组（它是我的烧瓶视图中的一个 python 列表）。

现在我想将这些列表用作饼图中的标签和数据，使用 Chart.js 构建

烧瓶

@app.route("/")
@login_required
def index():
[...]
    row = db.execute("SELECT DISTINCT symbol FROM transactions WHERE user_id = :user_id", user_id=session['user_id'])
    labels = []
    data = []
    for l in row:
        labels.append(l.get('symbol'))
    

    rowD = db.execute("SELECT SUM(shares) AS shares FROM transactions WHERE user_id = :user_id GROUP BY symbol", user_id=session['user_id'])
    for d in rowD:
        data.append(d.get('symbol'))
    return render_template("index.html", labels=labels, data=data)

HTML

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

    <script type="text/javascript">

        let ctx = document.getElementById('myChart').getContext('2d');
        var myPieChart = new Chart(ctx, {
            type: 'pie',
            data: {
                labels:  {{ labels | tojson }},
                datasets: [{
                    data: {{ data | tojson }}
            }]
          },
    });
    </script>

但是我继续收到来自 JS 的错误 (Parsing Error: Unexpected Token {) 并且我的图表一直为空，它没有出现在页面上

请问有什么帮助吗？

我正在使用一些简化，我对编程很陌生，所以我还在学习谢谢

标签： javascriptpythonparsingflask

解决方案

在第二个 for 循环中，您尝试获取查询中不存在的列：

rowD = db.execute("SELECT SUM(shares) AS shares FROM transactions WHERE user_id = :user_id GROUP BY symbol", user_id=session['user_id'])
for d in rowD:
    data.append(d.get('symbol'))

这应该是：

rowD = db.execute("SELECT SUM(shares) AS shares FROM transactions WHERE user_id = :user_id GROUP BY symbol", user_id=session['user_id'])
for d in rowD:
    data.append(d.get('shares'))

推荐阅读