Yan*_*ick 1 javascript flask chart.js
我在解析 Twitter 提要后获得了一组数据（它是我的烧瓶视图中的一个 python 列表）。
我想用它在另一个视图中构建图表。
我成功地将它传递到下一个视图的 Flask 模板标签上，但我不知道如何在使用 Chart.js 构建图表的 javascript 代码中使用这些数据
例如：
在 Google 上进行研究后，我尝试将图表标签数组传递给 javascript。我的问题是只传递了第一个元素，数据类型现在string不是Array.
将routes.pyvalues的labelsData变量传递给pie.html 中的变量的正确方法是什么？
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)
馅饼.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>
我在本地系统中尝试了你的代码，我终于在这个SO Answer 中得到了答案
Flask 为此提供了 Jinja 过滤器：tojson 将结构转储为 JSON 字符串并将其标记为安全，以便 Jinja 不会自动转义它。
所以我们可以将值传递给 Javascript，通过添加这个过滤器，我们可以将这些值传递给 Javascript 变量。
请参考我下面的代码片段，如果有任何问题，请告诉我！
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()
| 归档时间： |
|
| 查看次数： |
6600 次 |
| 最近记录： |