尝试使用 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>
浏览器中的错误消息(似乎值是编码格式。因此无法解析):
请有人帮我解决这个问题。谢谢。
最佳答案
您可以将 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>
关于python - 无法使用 Python-Flask 在 html 中设置变量值 - 值转换为编码格式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55557827/