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

Question

我有一个数组数据（在我的flask视图中是一个python列表），它是在查询我的DB之后获得的。

现在我想使用这些列表作为饼图中的标签和数据，使用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得到一个错误（解析错误：意外标记{）并且我的图表总是为空，它不会出现在页面上

有什么需要帮忙的吗？

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

Answer 1

在第二个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'))