利用 Flask 动态展示 Pyecharts 图表数据的几种方法
本文将介绍如何在 web 框架 Flask 中使用可视化工具 pyecharts, 看完本教程你将掌握几种动态展示可视化数据的方法,不会的话你来找我呀…
Flask 模板渲染
1. 新建一个项目flask_pyecharts
在编辑器中选择 New Project,然后选择 Flask,创建完之后,Pycharm 会帮我们把启动脚本和模板文件夹都建好
2. 拷贝 pyecharts 模板
将链接中的以下模板
├── jupyter_lab.html
├── jupyter_notebook.html
├── macro
├── nteract.html
├── simple_chart.html
├── simple_page.html
└── table.html
全部拷贝到 tempaltes 文件夹中
https://github.com/pyecharts/pyecharts/tree/master/pyecharts/render/templates
3.渲染图表
主要目标是将 pyecharts 生成的图表数据在视图函数中返回,所以我们直接在 app.py 中修改代码,如下:
from flask import Flask
from jinja2 import Markupfrom pyecharts import options as opts
from pyecharts.charts import Barapp = Flask(__name__, static_folder="templates")def bar_base() -> Bar:c = (Bar().add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]).add_yaxis("商家A", [5, 20, 36, 10, 75, 90]).add_yaxis("商家B", [15, 25, 16, 55, 48, 8]).set_global_opts(title_opts=opts.TitleOpts(title="Bar-基本示例", subtitle="我是副标题")))return c@app.route("/")
def index():c = bar_base()return Markup(c.render_embed())if __name__ == "__main__":app.run()
直接运行,在浏览器中输入地址,直接将数据显示出来了
这是一个很简单的静态数据展示,别急好戏还在后头~
Flask 前后端分离
前面讲的是一个静态数据的展示的方法,用 pyecharts 和 Flask 结合最主要是实现一种动态更新数据,增量更新数据等功能!以上面讲解的内容为基础,在 templates 文件夹中新建一个 index.html 的文件,其中主要用到了 jquery 和 pyecharts 管理的 echarts.min.js 依赖。
index.html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>动态更新数据</title><script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script><script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
</head>
<body><div id="bar" style="width:1000px; height:600px;"></div><script>(function () {var result_json = '{{ result_json|tojson }}';// var result = JSON.parse(result_json);var chart = echarts.init(document.getElementById('bar'), 'gray', {renderer: 'canvas'});$.ajax({type: "GET",url: "http://127.0.0.1:5000/barChart",dataType: 'json',data: {result: result_json},success: function (result) {chart.setOption(result);}});})</script>
</body>
</html>
有 html 基础的朋友应该知道该代码主要是向地址 "127.0.0.1:5000/barChart" 发送请求,所以在 app.py 中我们也需要做相应的修改,添加该地址的路由函数,从而实现动态数据更新。
部分代码如下:
@app.route("/")
def index():data = request.args.to_dict()return render_template("index.html", result_json=data)@app.route("/barChart")
def get_bar_chart():args = request.args.to_dict()result = eval(args.get("result"))name = result.get("name")subtitle = result.get("subtitle")c = bar_base(name, subtitle)return c.dump_options_with_quotes()
在 index 视图函数中接收浏览器传过来的参数,然后传递给 index.html。此处只是简单示例,所以未做参数校验。而另一个视图函数主要是获取参数,传给图表生成函数 bar_base(), 从而实现根据 url 地址传过来的参数,动态展示图表数据。结果如下:
这里只是简单演示, 所以只将图表标题作为动态传参。此场景适用于第一次请求获取我们想要的数据,然后将其展示出来。比如我之前写的 NBA 球员数据可视化
Python获取NBA历史巨星和现役所有球员生涯数据曲线
就是此方法,不同球员展示对应球员数据!
定时全量更新图表
该场景主要是前端主动向后端进行数据刷新,定时刷新的核心在于 HTML 的 setInterval 方法。那么 index.html 代码就是下面这样的:
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Awesome-pyecharts</title><script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script><script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script></head>
<body><div id="bar" style="width:1000px; height:600px;"></div><script>var chart = echarts.init(document.getElementById('bar'), 'white', {renderer: 'canvas'});$(function () {fetchData(chart);setInterval(fetchData, 2000);});function fetchData() {$.ajax({type: "GET",url: "http://127.0.0.1:5000/barChart",dataType: 'json',success: function (result) {chart.setOption(result);}});}</script>
</body>
</html>
对应的将 app.py 中 bar_base() 作相应的修改,从而实现定时全量更新图表
def bar_base() -> Bar:c = (Bar().add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]).add_yaxis("商家A", [random.randint(10, 100) for _ in range(6)]).add_yaxis("商家B", [random.randint(10, 100) for _ in range(6)]).set_global_opts(title_opts=opts.TitleOpts(title="", subtitle="")))return c@app.route("/")
def index():return render_template("index.html")@app.route("/barChart")
def get_bar_chart():c = bar_base()return c.dump_options_with_quotes()
运行之后,在浏览器中打开,效果如下:
看到这动图,有没有一种…,如果我是 DJ DJ,琦你太美…
定时增量更新图表
同样的要对 index.html 做修改
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Awesome-pyecharts</title><script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script><script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script></head>
<body><div id="bar" style="width:1000px; height:600px;"></div><script>var chart = echarts.init(document.getElementById('bar'), 'white', {renderer: 'canvas'});var old_data = [];$(function () {fetchData(chart);setInterval(getDynamicData, 2000);});function fetchData() {$.ajax({type: "GET",url: "http://127.0.0.1:5000/lineChart",dataType: "json",success: function (result) {chart.setOption(result);old_data = chart.getOption().series[0].data;}});}function getDynamicData() {$.ajax({type: "GET",url: "http://127.0.0.1:5000/lineDynamicData",dataType: "json",success: function (result) {old_data.push([result.name, result.value]);chart.setOption({series: [{data: old_data}]});}});}</script>
</body>
</html>
增量更新,后端代码也需要相应的修改
from pyecharts.charts import Linedef line_base() -> Line:line = (Line().add_xaxis(["{}".format(i) for i in range(10)]).add_yaxis(series_name="",y_axis=[randrange(50, 80) for _ in range(10)],is_smooth=True,label_opts=opts.LabelOpts(is_show=False),).set_global_opts(title_opts=opts.TitleOpts(title="动态数据"),xaxis_opts=opts.AxisOpts(type_="value"),yaxis_opts=opts.AxisOpts(type_="value"),))return line@app.route("/")
def index():return render_template("index.html")@app.route("/lineChart")
def get_line_chart():c = line_base()return c.dump_options_with_quotes()idx = 9@app.route("/lineDynamicData")
def update_line_data():global idxidx = idx + 1return jsonify({"name": idx, "value": randrange(50, 80)})
走起,来看看效果吧
作者:华为云合作开发者Jerryning Python编程与实战
利用 Flask 动态展示 Pyecharts 图表数据的几种方法相关推荐
- 干货!Flask 动态展示 Pyecharts 图表数据的几种方法!
本文将介绍如何在 web 框架 Flask 中使用可视化工具 pyecharts, 看完本教程你将掌握几种动态展示可视化数据的方法,不会的话你来找我呀- Flask 模板渲染 1. 新建一个项目fla ...
- django jsonresponse_利用 Django 动态展示 Pyecharts 图表数据的几种方法
本文将介绍如何在 web 框架 Django 中使用可视化工具 Pyecharts, 看完本教程你将掌握几种动态展示可视化数据的方法! Django 模板渲染 1. 新建一个 Django 项目 命令 ...
- 利用 Django 动态展示 Pyecharts 图表数据的几种方法
本文将介绍如何在 web 框架 Django 中使用可视化工具 Pyecharts, 看完本教程你将掌握几种动态展示可视化数据的方法! Django 模板渲染 1. 新建一个 Django 项目 命令 ...
- 利用Flask动态展示Pyechats图表
之前,在网上搜到过很多教程,但是我按照教程做,一次也没成功.踩了很多坑,最后才做成. 没成功的主要原因: pyecharts版本不同,有些函数我的pyecharts库里没有,如dump_options ...
- 用旭日图展示数据的三种方法
什么是旭日图? 旭日图(Sunburst Chart)是一种现代饼图,它超越传统的饼图和环图,能表达清晰的层级和归属关系,以父子层次结构来显示数据构成情况.旭日图中,离远点越近表示级别越高,相邻两层中 ...
- html select ajax,AJAX 动态加载后台数据 绑定select的方法
直接上代码 是可以用的,后台代码我就不贴了,我相信后台代码大家都会,直接返回json数据,我是前端比较差的,所以喜欢把每次不会的全部记起来 html代码 //下拉框数据动态加载 js代码 $.ajax ...
- 前端js调用后端API获取数据的三种方法(2022.7.25)
前端js调用后台API获取数据的三种方法(2022.7.25) 前言 需求分析 一个Get实例 浏览器请求 SoapUI软件请求 一个Post实例 浏览器请求 SoapUI软件请求 1.Http简介( ...
- python csv库,Python 中导入csv数据的三种方法
Python 中导入csv数据的三种方法,具体内容如下所示: 1.通过标准的Python库导入CSV文件: Python提供了一个标准的类库CSV文件.这个类库中的reader()函数用来导入CSV文 ...
- 动态加载JS脚本的4种方法
动态加载JS脚本的4种方法 2006-12-04 15:33 要实现动态加载JS脚本有4种方法: 1.直接document.write <script language="javasc ...
最新文章
- 无限极:对虚假宣传行为查处不力 推十条整改措施
- 『Tarjan算法 无向图的双联通分量』
- Ubuntu Server 16升級到Ubuntu Server 18操作步驟
- c语言解决函数变参数问题 va_list
- mysql union join_MySQL 超新手入门(5) JOIN 与 UNION 查询
- 【技术史】数据中台的前世今生
- LiveVideoStackCon 一次全新的尝试,错过了就是一辈子
- webBroser获取cookie
- MAC下安装和管理java
- Atitit.收银系统pos 以及打印功能的行业标准
- 简单区分一级域名、二级域名、三级域名
- 记一次three.js 布局3D室内简易地图
- 华为认证证书有什么好处
- pymol作图-设置label的字体
- 使用pytorch模型学习框架easyocr模块识别行程码图片文字并使用Flask Web返回指定信息json字符串
- 生不逢时的祭品-图拉丁处理器!INTEL永远不愿承认的秘密!
- [凯立德]2013.12.17凯立德发布秋季版(2F21J0E)最新增量包SP1_我是亲民_新浪博客...
- python中的注释行和注释块
- 计算机房安全检查项目,机房检测的内容(上)
- linux游戏是rpm文件格式,你玩游戏吗?软件包的管理(一)——RPM
热门文章
- 计算机图形学生活应用,计算机图形学的应用实例(计算机图形作业).doc
- html纵向固定导航菜单代码,CSS3单页面垂直固定导航
- python的with as语句_python with (as)语句
- Vue源码之 Vue的生命周期
- android 练习之路 (一)
- RedHat中敲sh-copy-id命令报错:-bash: ssh-copy-id: command not found
- gitlab搭建之互备模式
- Android ContentProvider 内容提供者
- 设计一种网络分播软件
- Java-static-静态方法/全局方法