问题描述
我有一个数据数组(它是我的烧瓶视图中的一个 python 列表)在解析 twitter 提要后获得.
I have an array of data (it's a python list in my flask view) obtained after parsing a twitter feed.
我想用它在另一个视图中构建图表.
I want to use it to build a chart in another view.
我成功地将它传递给下一个视图的 Flask 模板标签，但我不知道如何在将使用 Chart.js 构建图表的 javascript 代码中使用这些数据
I succeeded passing it onto the Flask template tags of the next view, but I can't figure out how to use this data inside the javascript code that will build the chart using Chart.js
例如:
在 Google 上进行研究后，我尝试将图表标签数组传递给 javascript.我遇到的问题是只传递了第一个元素，数据类型现在是 string 而不是 Array.
After researching on Google, I tried this to pass the array of the chart labels to javascript. The issue I have is that only the first element is passed and the data type is now string instead of Array.
将 routes.py 的 values 变量传递给 pie.html 中的 labelsData 变量的正确方法是什么?
What would be the right way to do pass the values variable of routes.py to the labelsData variable in pie.html ?
Flask-routes.py
Flask- routes.py
[...]
@app.route("/piechart/<twitterhandle>")
def pie(twitterhandle):
from app.twitter_parser import twitter_parser as tp
alltweets = tp.get_all_tweets(twitterhandle)
word_dict = tp.word_count(alltweets)
keywords_dict = tp.top10words(word_dict)
# keywords_dict is a dictionnary containing the 10 most
# used words as keys and their respective count as value
values = [values for labels, values in keywords_dict]
labels = [labels for labels, values in keywords_dict]
colors = [ "#F7464A", "#46BFBD", "#FDB45C", "#FEDCBA","#ABCDEF", "#DDDDDD", "#ABCABC", "#CAABB9", "#46F7F3", "#EFCDAB"]
# Render the Template
return render_template('pie.html', values=values, labels=labels,
colors=colors)
pie.html
[...]
<meta id="labels_data" data-labels={{labels}}>
<meta id="values_data" data-values={{values}}>
<meta id="colors_data" data-colors={{colors}}>
[...]
<script>
var labelsData=document.getElementById("labels_data").dataset.labels;
var valuesData=document.getElementById("values_data").dataset.values;
var colorsData=document.getElementById("colors_data").dataset.colors;
new Chart(document.getElementById("pie-chart"), {
type: 'pie',
data: {
labels: labelsData,
datasets: [{
label: "Pie Chart",
backgroundColor: colorsData,
data: valuesData
}]
},
options: {
title: {
display: true,
text: 'Pie Chart Title'
}
}
});
</script>
推荐答案
我在本地系统中试过你的代码，我终于在这个所以回答
I tried your code in my local system, I finally got the answer in this SO Answer
Flask 为此提供了一个 Jinja 过滤器:tojson 将结构转储到一个 JSON 字符串并将其标记为安全，这样 Jinja 就不会自动转义它.
所以我们可以将值传递给 Javascript，并通过添加这个过滤器，我们可以将这些值传递给 Javascript 变量.
So we can just pass the values to Javascript and by adding this filter, we can pass these values to Javascript variables.
请参考我下面的片段，如果有任何问题，请告诉我！
Please refer my below snippet and let me know if there are any issues!
HTML:
<body>
<canvas id="pie-chart" width="600" height="400"></canvas>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
<script>
new Chart(document.getElementById("pie-chart"), {
type: 'pie',
data: {
labels: {{labels | tojson}},
datasets: [{
label: "Pie Chart",
backgroundColor: {{colors | tojson}},
data: {{values | tojson}}
}]
},
options: {
title: {
display: true,
text: 'Pie Chart Title'
}
}
});
</script>
烧瓶:
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def hello_world():
values = [12, 19, 3, 5, 2, 3]
labels = ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange']
colors = ['#ff0000','#0000ff','#ffffe0','#008000','#800080','#FFA500']
return render_template('pie.html', values=values, labels=labels, colors=colors)
if __name__ == '__main__':
app.run()
这篇关于将数组从 Flask 视图传递到另一个视图的 javascript 代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！