今天编程学习网为大家讲解flask框架实现可视化技术，有需要的小伙伴可以参考一下：
在完成一个小项目的时候，我发现python的Matplotlib与Pandas库显示的效果太过单一，无法更加直观的显示可视化效果，后面想到了flask框架有可视化。
就开始在多个网站中翻阅博客查找资源，就是具有这方面的博客讲解的太少了，绝大多数都不是flask可视化或者就是显示结果符合我的实际要求下面先展示数据内容：
下面展示我之间的一部分代码实现，下面代码是python的代码
from flask import Flask, render_template, request
import json
app = Flask(import_name=__name__,
static_url_path='/python', # 配置静态文件的访问url前缀
static_folder='static', # 配置静态文件的文件夹
template_folder='templates') # 配置模板文件的文件夹
@app.route('/', methods=["GET"])
def index():
zuzhuan = zhuzhuan(6)
return render_template("indexs.html", Types=json.dumps(zuzhuan))
def zhuzhuan(i):
filename = open(f'input/{i}/part-00000', 'r', encoding='utf-8') # 柱状图
lines = filename.read()
line_list = lines.split('\n')
tpe = []
num = []
for line in line_list:
jguo = line.split(",")
tpe.append(jguo[0])
num.append(jguo[1])
list_1 = dict(zip(tpe, num))
# print(list_1)
return list_1
if __name__ == '__main__':
app.run(host="127.0.0.1", port=8086, debug=False)
这里是HTML文件index.html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链家长沙新房分析</title>
<link rel="stylesheet" href="bootstrap.min.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="echarts.min.js"></script>
</head>
<body>
<!--长沙房产面积销售柱状图绘制方法-->
<div class="panel panel-primary" style="width: 100%;height: 320px">
<div class="panel-heading">
<h3 class="panel-title">长沙房产面积销售柱状图</h3>
</div>
<div class="panel-body">
<div id="HistogramChart1" style="width:100%; height: 300px"></div>
</div>
</div>
<!--长沙房产面积销售柱状图绘制方法-->
<script type="text/javascript" charset="UTF-8">
var kv = new Array();
var keys = new Array();
var values = new Array();
kv = {{ Types | safe }}
for(var logkey in kv){
keys.push(logkey);
values.push(kv[logkey]);
}
var display = function() {
var echo = echarts.init(document.getElementById("HistogramChart1"));
var option = {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'aqua',
fontSize: 15
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: keys,
axisLabel:{
interval:0,//横轴信息全部显示
rotate:30,//-30度角倾斜显示
}
},
yAxis: {
type: 'value'
},
series: [{
data: values,
type: 'bar'
}]
};
echo.setOption(option,true);
};
display();
</script>
</body>
下面是代码运行效果：
扫码二维码 获取免费视频学习资料
- 本文固定链接: http://www.phpxs.com/post/10388/
- 转载请注明：转载必须在正文中标注并保留原文链接
- 扫码： 扫上方二维码获取免费视频资料