我想使用Flask来渲染一个ChartJS图形。这是从我的routes.py
@app.route("/graph")
def graph():
d = Eval.query.all()
labels = [i.date.strftime('%d.%m.%Y') for i in d]
data = [i.bw for i in d]
return render_template('chart.html', title='Charts', labels = labels, data = data)
我在chart.html中有以下代码:
{% extends "base.html" %}
{% block content %}
<canvas id="myChart" height="400" width="800"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script type="text/javascript">
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: ['16.07.2017', '23.07.2017', '30.07.2017', '06.08.2017', '13.08.2017'],
datasets: [{
label: "My First dataset",
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: {{ data }}
}]
},
options: {
responsive:false
}
});
</script>
{% endblock %}
使用此代码,图表将使用正确的标签呈现。
问题:
但是,一旦我将标签更改为
labels: {{ labels }}
则根本不呈现图表。
我检查以确保{{ labels }}表达式确实也是具有正确格式的列表。在script标记上方调用{{ labels }}会在html页面中显示以下输出:
['16.07.2017', '23.07.2017', '30.07.2017', '06.08.2017', '13.08.2017']
2条答案
按热度按时间kxxlusnw1#
如果你没有使用
safe
过滤器,在模板解析过程中,特殊的符号会被转义,并且会破坏变量值。在上面的例子中,没有“jinja safe”过滤器的最终变量值将是
这个值(
['16.07.2017','23.07.2017']
)对于JS来说是非法的,你可以在浏览器控制台中看到错误:在上述情况下,最终变量值与'jinja安全'过滤器将是相同的
你可以在这里阅读更多关于逃跑的信息。
tvz2xvvm2#
我在脚本中添加了Jinja表达式作为变量,现在图表可以按预期呈现。还不知道为什么...