无法使用Python Flask在html中设置变量值-值转换为编码格式_Python_Jinja2

无法使用Python Flask在html中设置变量值-值转换为编码格式

python

无法使用Python Flask在html中设置变量值-值转换为编码格式,python,jinja2,Python,Jinja2,正在尝试使用Python Flask和chart.js创建折线图当我直接在html文件中硬编码值时，我可以看到图表。但若我将代码中的值解析为html，则值会转换为某种编码格式。不知道该怎么处理我的代码： from flask import Flask, Markup, render_template app = Flask(__name__) labels = [ 'WEEK1', 'WEEK2', 'WEEK3', 'WEEK4' ] values = [{'point

正在尝试使用Python Flask和chart.js创建折线图

当我直接在html文件中硬编码值时，我可以看到图表。但若我将代码中的值解析为html，则值会转换为某种编码格式。不知道该怎么处理

我的代码：

from flask import Flask, Markup, render_template

app = Flask(__name__)

labels = [
       'WEEK1', 'WEEK2', 'WEEK3', 'WEEK4'
]

values = [{'pointColor': 'rgba(0,128,0)', 'strokeColor': 'rgba(0,128,0)', 'data': [49.29, 64.3, 99.07, 97], 'fillColor': 'rgba(0,0,0,0)', 'label': 'Green'}, {'pointColor': 'rgba(220,180,0,1)', 'strokeColor': 'rgba(255,153,0)', 'data': [94.3, 90.9, 91.9, 92.1], 'fillColor': 'rgba(0,0,0,0)', 'label': 'Orange'}, {'pointColor': 'rgba(0,0,255)', 'strokeColor': 'rgba(0,0,255)', 'data': [74.3, 60.9, 81.9, 72.1], 'fillColor': 'rgba(0,0,0,0)', 'label': 'Blue'}, {'pointColor': 'rgba(128,0,128)', 'strokeColor': 'rgba(128,0,128)', 'data': [54.3, 50.9, 51.9, 52.1], 'fillColor': 'rgba(0,0,0,0)', 'label': 'Purple'}]

colors = [
    "#C71585", "#FF4500", "#FEDCBA", "#46BFBD"]

@app.route('/line')
def line():
    line_labels=labels
    line_values=values
    return render_template('line_chart.html', title='Line', max=100, labels=line_labels, values=line_values)


if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5001)

HTML文件：[如果我直接在HTML文件本身中替换“标签和数据集”的值，它可以工作]

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>{{ title }}</title>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js'></script>
</head>

<body>
<center>
{{ values }}
<canvas id="myChart" width="600" height="400"></canvas>
<script>

var demoData = {
    labels : {{ labels }}
    datasets : {{ values }}
  }

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx).Line(demoData);
</script>
</center>
</body>
</html>


{{title}}
{{values}}
变量解调数据={
标签：{{labels}}
数据集：{{values}
}
var ctx=document.getElementById（'myChart'）.getContext（'2d'）；
var myChart=新图表（ctx）.Line（解调数据）；

浏览器中的错误消息（值似乎为编码格式，因此无法分析）：

谁来帮我修一下。谢谢。

您可以将

ajax

与

jquery

一起使用，从后端动态检索

json

化的数据值，并利用结果为图形提供动力

在Python应用程序中，添加额外的路由以接收

ajax

请求并返回

json

结果：

from flask import Flask, Markup, render_template, jsonify
import json

labels = ['WEEK1', 'WEEK2', 'WEEK3', 'WEEK4']
values = [{'pointColor': 'rgba(0,128,0)', 'strokeColor': 'rgba(0,128,0)', 'data': [49.29, 64.3, 99.07, 97], 'fillColor': 'rgba(0,0,0,0)', 'label': 'Green'}, {'pointColor': 'rgba(220,180,0,1)', 'strokeColor': 'rgba(255,153,0)', 'data': [94.3, 90.9, 91.9, 92.1], 'fillColor': 'rgba(0,0,0,0)', 'label': 'Orange'}, {'pointColor': 'rgba(0,0,255)', 'strokeColor': 'rgba(0,0,255)', 'data': [74.3, 60.9, 81.9, 72.1], 'fillColor': 'rgba(0,0,0,0)', 'label': 'Blue'}, {'pointColor': 'rgba(128,0,128)', 'strokeColor': 'rgba(128,0,128)', 'data': [54.3, 50.9, 51.9, 52.1], 'fillColor': 'rgba(0,0,0,0)', 'label': 'Purple'}]
colors = ['#C71585', '#FF4500', '#FEDCBA', '#46BFBD']

@app.route('/get_data')
def get_data():
   return flask.jsonify({'labels':json.dumps(labels), 'values':json.dumps(values), 'colors':json.dumps(colors), 'max':100})

@app.route('/line')
def line():
  line_labels=labels
  line_values=values
  return render_template('line_chart.html', title='line')

现在，在模板中，利用

ajax

从

/get_data

检索值：

<html lang="en">
  <head>
  <meta charset="utf-8" />
    <title>{{ title }}</title>
   <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js'></script>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  </head>
 <body>
  <center>
  <canvas id="myChart" width="600" height="400"></canvas>
  <script>
   var values;
   var labels;
   $.ajax({
    url: "/get_data",
    type: "get",
    data: {'key': 'ignore'}, //can send data from frontend to backend if needed
    success: function(response) {
      $(response.values).insertBefore("#myChart");
      values = response.values;
      labels = response.labels;
    },
    error: function(xhr) {
       //pass
     }
   });
   var demoData = {
     labels : labels,
     datasets : values
   }

   var ctx = document.getElementById('myChart').getContext('2d');
   var myChart = new Chart(ctx).Line(demoData);
  </script>
 </center>
 </body>
</html>


{{title}}
var值；
var标签；
$.ajax({
url:“/获取数据”，
键入：“获取”，
数据：{'key'：'ignore'}，//如果需要，可以将数据从前端发送到后端
成功：功能（响应）{
$（response.values）；
数值=响应。数值；
labels=response.labels；
},
错误：函数（xhr）{
//通过
}
});
变量解调数据={
标签：标签，
数据集：值
}
var ctx=document.getElementById（'myChart'）.getContext（'2d'）；
var myChart=新图表（ctx）.Line（解调数据）；