通过jinja2模板语法实现Flask+echarts数据可视化项目前后端数据传递

db_yc_3181

2024-04-25 帮助1人

本文的学习需要读者有一定的Flask和echarts的知识基础，初学者请先自学完成Flask简易项目搭建以及静态数据的echarts数据可视化。

一般地，Flask项目在主函数（app.py）里的视图函数（@route修饰的函数）的返回值中通过render_template函数对模板（html）进行渲染，并允许在render_template函数传入需要传递给模板（html）的变量。

下面是一个简单的例子：

【app.py】主函数部分：

from flask import Flask,render_template
app = Flask(__name__)
@app.route('/')
def hello():
data = '这是一个后端数据'
return render_template('page.html',data=data)
if __name__ == '__main__':
app.run(debug=True)

【page.html】模板部分：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>echarts画图</title>
<script type="text/javascript" src=""></script>
</head>
<body>
<h1>{{data}}</h1>
</body>
</html>

渲染效果：

学新通

可以看到主函数中render_template('page.html',data=data)的data参数实现了数据从后端到前端的传递，并最后将数据通过 jinja2 的模板语法 {{data}} 传递到了模板（html）中的标题标签<h1>{{data}}</h1>中。

进一步地，当我们想要使用后端的时候在模板（html）中引入echarts图形时，同样可以将后端数据data通过模板语法 {{data}} 传递给js中的option配置项：

【app.py】主函数部分：

from flask import Flask,render_template
app = Flask(__name__)
@app.route('/')
def hello():
data = {
'x':[1,2,3],
'y':[1,2,3],
}
return render_template('page.html',data=data)
if __name__ == '__main__':
app.run(debug=True)

【page.html】模板部分：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>echarts画图</title>
<script type="text/javascript" src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<h1>x轴数据：{{data.x}}</h1>
<h1>y轴数据：{{data.y}}</h1>
<div id="chart" style="width: 1200px;height: 600px;"></div>
<script>
var myChart = echarts.init(document.getElementById("chart"));
var option;
option = {
xAxis: {
type: 'category',
data: {{data.x}}
},
yAxis: {
type: 'value'
},
series: [
{
data: {{data.y}},
type: 'line'
}
]
};
myChart.setOption(option);
</script>
</body>
</html>

渲染效果：

学新通

最后，如果无法渲染图形，可以考虑将 {{ 变量 }} 修改为：

{{ 变量|tojson }}

其中 tojson 被称为【过滤器】，是一系列关于字符串的预处理方法，这里需要将data数据转换为json数据才能在html中进行渲染。

这篇好文章是转载于：学新通技术网

通过jinja2模板语法实现Flask+echarts数据可视化项目前后端数据传递

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

word里面弄一个表格后上面的标题会跑到下面怎么办

《学习通》视频自动暂停处理方法

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

怎样阻止微信小程序自动打开

TikTok加速器哪个好免费的TK加速器推荐