我如何使用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 }}
}]
});
相关文章