Lko*_*Lko 1 javascript python flask chart.js
我正在尝试使用来自 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()
脚本1.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标签链接。但是，向后端发送请求以获取 jsonified 数据比尝试在模板中呈现值本身要好得多。在 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'
}
}
});
});
| 归档时间： |
|
| 查看次数： |
6054 次 |
| 最近记录： |