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

rnmwe5a2  于 2023-10-18  发布在  Chart.js
关注(0)|答案(2)|浏览(202)

我想使用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']
kxxlusnw

kxxlusnw1#

如果你没有使用safe过滤器,在模板解析过程中,特殊的符号会被转义,并且会破坏变量值。
在上面的例子中,没有“jinja safe”过滤器的最终变量值将是

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

这个值([&#39;16.07.2017&#39;,&#39;23.07.2017&#39;])对于JS来说是非法的,你可以在浏览器控制台中看到错误:

Uncaught SyntaxError: Unexpected token &

在上述情况下,最终变量值与'jinja安全'过滤器将是相同的

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

你可以在这里阅读更多关于逃跑的信息。

tvz2xvvm

tvz2xvvm2#

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表达式作为变量,现在图表可以按预期呈现。还不知道为什么...

相关问题