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

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

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

Answer 1

如果您不使用

safe

过滤器，特殊符号将在模板解析过程中被转义，并会损坏变量值。

在上述情况下，没有“jinja safe”过滤器的最终变量值将是

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

这个值（

['16.07.2017','23.07.2017']

）对于 JS 来说是非法的，你将能够在浏览器控制台中看到错误：

Uncaught SyntaxError: Unexpected token &

在上述情况下，带有“jinja safe”过滤器的最终变量值将是相同的

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

您可以在这里阅读更多有关逃脱的内容。

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 表达式添加为脚本中的变量，现在图表按预期呈现。还是不知道为什么...

Answer 3

我在这个问题上坚持了一个星期，这解决了这个谜团。