Question

我想使用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}}表达式确实也是一个具有正确格式化的列表。在脚本标记上方调用{{labels}}会在html页面中显示以下输出：

['16.07.2017', '23.07.2017', '30.07.2017', '06.08.2017', '13.08.2017']

Answer 1

如果您没有使用safe过滤器，特殊符号将在模板解析过程中被转义，并会破坏变量值。

在上面的例子中，没有＆＃39; jinja safe＆＃39;的最终变量值。过滤器将是

["16.07.2017", "23.07.2017"] =>[&#39;16.07.2017&#39;,&#39;23.07.2017&#39;]

该值（['16.07.2017','23.07.2017']）对于JS来说是非法的，您将能够在浏览器控制台中看到错误：

Uncaught SyntaxError: Unexpected token &

在上面的案例中，最终变量值与＆＃39; jinja safe＆＃39;过滤器将是相同的

["16.07.2017", "23.07.2017"] =>["16.07.2017", "23.07.2017"]

You can read more about escaping here

Answer 2

var ctx = document.getElementById('myChart').getContext('2d');
var dates = {{labels|safe}};
var data1 = {{data|safe}}
var chart = new Chart(ctx, {
type: 'line',
data: {
      labels: dates,
      datasets: [{
          label: "My First dataset",
          backgroundColor: 'rgb(255, 99, 132)',
          borderColor: 'rgb(255, 99, 132)',
          data: data1

我在表单中添加了Jinja表达式作为变量，现在图表按预期呈现。还不确定为什么......

ChartJS不显示Jinja变量提供的标签

2 个答案: