我正在尝试使用 python 脚本中的数据为 Web 应用程序创建交互式图表。
错误是来自Python代码的数据未在chart.js脚本上传输或更新，并且未在html上输出。
3个脚本的流程:来自python的标签和数据，进入chart.js以渲染条形图并在html上输出
当我将非洲(数据点)从 2447 更改为 5578 时，图表未更新。我不确定问题是从 python 传输还是渲染图表。
Python
from flask import Flask,render_template
app = Flask(__name__)
@app.route("/")
def result():
labels = ["Africa", "Asia", "Europe", "Latin America", "North America"]
data = [5578,5267,734,784,433]
return render_template("result.html", labels=labels, data=data)
if __name__ == '__main__':
app.debug = True
app.run()
script1.js
new Chart(document.getElementById("bar-chart"), {
type: 'bar',
data: {
labels: "{{labels}}",
datasets: [
{
label: "Population (millions)",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
data: "{{data }}"
}
]
},
options: {
legend: { display: false },
title: {
display: true,
text: 'Predicted world population (millions) in 2050'
}
}
});
HTML
<!DOCTYPE html>
<html>
<head>
<title>New</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js">
</script>
</head>
<body>
<h1>Test</h1>
<div class="wrapper">
<canvas id="bar-chart" width="800" height="450"></canvas>
</div>
<script src="{{ url_for('static', filename='script1.js') }}"></script>
</body>
</html>
最佳答案
script1.js 未由 flask.render_template 渲染，因为它仅由 script 标记链接。但是，向后端发送 json 化数据的请求比尝试在模板中呈现值本身要好得多。在 Python 文件中创建一个附加路由，以根据 ajax 请求返回值:
import json
@app.route("/")
def result():
return render_template("result.html")
@app.route('/get_data')
def get_data():
labels = ["Africa", "Asia", "Europe", "Latin America", "North America"]
data = [5578,5267,734,784,433]
return flask.jsonify({'payload':json.dumps({'data':data, 'labels':labels})})
不要忘记在 HTML 中包含 jquery 以支持 ajax 调用:
<head>
<title>New</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js">
</head>
最后，在 script1.js 中:
$(document).ready(function(){
var _data;
var _labels;
$.ajax({
url: "/get_data",
type: "get",
data: {vals: ''},
success: function(response) {
full_data = JSON.parse(response.payload);
_data = full_data['data'];
_labels = full_data['labels'];
},
});
new Chart(document.getElementById("bar-chart"), {
type: 'bar',
data: {
labels: _labels,
datasets: [
{
label: "Population (millions)",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
data: _data
}
]
},
options: {
legend: { display: false },
title: {
display: true,
text: 'Predicted world population (millions) in 2050'
}
}
});
});
关于javascript - Chart.js 未更新 Flask python 或接收来自 Flask 的数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53836114/