利用 Flask 動(dòng)態(tài)展示 Pyecharts 圖表數(shù)據(jù)方法小結(jié)
本文將介紹如何在 web 框架 Flask 中使用可視化工具 pyecharts, 看完本教程你將掌握幾種動(dòng)態(tài)展示可視化數(shù)據(jù)的方法,不會(huì)的話你來找我呀...
Flask 模板渲染
1. 新建一個(gè)項(xiàng)目 flask-echarts
在編輯器中選擇 New Project,然后選擇 Flask,創(chuàng)建完之后,Pycharm 會(huì)幫我們把啟動(dòng)腳本和模板文件夾都建好

2. 拷貝 pyecharts 模板
將鏈接中的以下模板 ├── jupyter_lab.html ├── jupyter_notebook.html ├── macro ├── nteract.html ├── simple_chart.html ├── simple_page.html └── table.html 全部拷貝到 tempaltes 文件夾中 github.com/pyecharts/p…
3.渲染圖表
主要目標(biāo)是將 pyecharts 生成的圖表數(shù)據(jù)在視圖函數(shù)中返回,所以我們直接在 app.py 中修改代碼,如下:
from flask import Flask
from jinja2 import Markup
from pyecharts import options as opts
from pyecharts.charts import Bar
app = 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="我是副標(biāo)題"))
)
return c
@app.route("/")
def index():
c = bar_base()
return Markup(c.render_embed())
if __name__ == "__main__":
app.run()
直接運(yùn)行,在瀏覽器中輸入地址,直接將數(shù)據(jù)顯示出來了
這是一個(gè)很簡(jiǎn)單的靜態(tài)數(shù)據(jù)展示,別急好戲還在后頭~
Flask 前后端分離
前面講的是一個(gè)靜態(tài)數(shù)據(jù)的展示的方法,用 pyecharts 和 Flask 結(jié)合最主要是實(shí)現(xiàn)一種動(dòng)態(tài)更新數(shù)據(jù),增量更新數(shù)據(jù)等功能!以上面講解的內(nèi)容為基礎(chǔ),在 templates 文件夾中新建一個(gè) index.html 的文件,其中主要用到了 jquery 和 pyecharts 管理的 echarts.min.js 依賴。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>動(dòng)態(tài)更新數(shù)據(jù)</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 基礎(chǔ)的朋友應(yīng)該知道該代碼主要是向地址 "127.0.0.1:5000/barChart" 發(fā)送請(qǐng)求,所以在 app.py 中我們也需要做相應(yīng)的修改,添加該地址的路由函數(shù),從而實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)更新。 部分代碼如下:
@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 視圖函數(shù)中接收瀏覽器傳過來的參數(shù),然后傳遞給 index.html。此處只是簡(jiǎn)單示例,所以未做參數(shù)校驗(yàn)。而另一個(gè)視圖函數(shù)主要是獲取參數(shù),傳給圖表生成函數(shù) bar_base(), 從而實(shí)現(xiàn)根據(jù) url 地址傳過來的參數(shù),動(dòng)態(tài)展示圖表數(shù)據(jù)。結(jié)果如下:
這里只是簡(jiǎn)單演示, 所以只將圖表標(biāo)題作為動(dòng)態(tài)傳參。此場(chǎng)景適用于第一次請(qǐng)求獲取我們想要的數(shù)據(jù),然后將其展示出來。比如我之前寫的 NBA 球員數(shù)據(jù)可視化 mp.weixin.qq.com/s/WWCNf46Ch…
就是此方法,不同球員展示對(duì)應(yīng)球員數(shù)據(jù)!
定時(shí)全量更新圖表
該場(chǎng)景主要是前端主動(dòng)向后端進(jìn)行數(shù)據(jù)刷新,定時(shí)刷新的核心在于 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>
對(duì)應(yīng)的將 app.py 中 bar_base() 作相應(yīng)的修改,從而實(shí)現(xiàn)定時(shí)全量更新圖表
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()
運(yùn)行之后,在瀏覽器中打開,效果如下:
看到這動(dòng)圖,有沒有一種...,如果我是 DJ DJ,琦你太美...
定時(shí)增量更新圖表
同樣的要對(duì) 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>
增量更新,后端代碼也需要相應(yīng)的修改
from pyecharts.charts import Line
def 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="動(dòng)態(tài)數(shù)據(jù)"),
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 idx
idx = idx + 1
return jsonify({"name": idx, "value": randrange(50, 80)})
走起,來看看效果吧
總結(jié)
以上所述是小編給大家介紹的利用 Flask 動(dòng)態(tài)展示 Pyecharts 圖表數(shù)據(jù)方法小結(jié),希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
相關(guān)文章
Python?PaddleGAN實(shí)現(xiàn)照片人物性別反轉(zhuǎn)
PaddleGAN中的styleganv2editing.py是支持性別編輯的。所以本文將介紹如何通過調(diào)整參數(shù),來試著實(shí)現(xiàn)一下照片的性別翻轉(zhuǎn)。感興趣的小伙伴可以學(xué)習(xí)一下2021-12-12
使用__init__.py將文件夾設(shè)置成Python模塊示例詳解
這篇文章主要為大家介紹了使用__init__.py將文件夾設(shè)置成Python模塊示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
python可視化篇之流式數(shù)據(jù)監(jiān)控的實(shí)現(xiàn)
這篇文章主要介紹了python可視化篇之流式數(shù)據(jù)監(jiān)控的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
python實(shí)現(xiàn)簡(jiǎn)單遺傳算法
這篇文章主要介紹了python如何實(shí)現(xiàn)簡(jiǎn)單遺傳算法,幫助大家更好的利用python進(jìn)行數(shù)據(jù)分析,感興趣的朋友可以了解下2020-09-09
Python時(shí)間處理模塊time和datetime詳解
本文詳細(xì)介紹了Python中常用的時(shí)間處理模塊time和datetime,time模塊提供多種時(shí)間獲取和轉(zhuǎn)換功能,datetime模塊則在time的基礎(chǔ)上增加了日期和時(shí)間的組合處理,如datetime.now()獲取當(dāng)前日期時(shí)間,兩個(gè)模塊在日常編程中非常有用,尤其是在需要時(shí)間日期計(jì)算和轉(zhuǎn)換的場(chǎng)景下2024-10-10
Python轉(zhuǎn)換HTML到Text純文本的方法
這篇文章主要介紹了Python轉(zhuǎn)換HTML到Text純文本的方法,分析了常用的兩種方法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-01-01
使用keras實(shí)現(xiàn)Precise, Recall, F1-socre方式
這篇文章主要介紹了使用keras實(shí)現(xiàn)Precise, Recall, F1-socre方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-06-06
Python實(shí)現(xiàn)TXT數(shù)據(jù)轉(zhuǎn)三維矩陣
在數(shù)據(jù)處理和分析中,將文本文件中的數(shù)據(jù)轉(zhuǎn)換為三維矩陣是一個(gè)常見的任務(wù),本文將詳細(xì)介紹如何使用Python實(shí)現(xiàn)這一任務(wù),感興趣的小伙伴可以了解下2024-01-01
在Python3中使用asyncio庫(kù)進(jìn)行快速數(shù)據(jù)抓取的教程
這篇文章主要介紹了在Python3中使用asyncio進(jìn)行快速數(shù)據(jù)抓取,asyncio是一個(gè)異步IO庫(kù),運(yùn)行效率較高,需要的朋友可以參考下2015-04-04

