Flask+plotly实现数据可视化

最新推荐文章于 2024-05-11 22:29:15 发布

尖沙咀段坤

最新推荐文章于 2024-05-11 22:29:15 发布

阅读量2.9k

点赞数 2

分类专栏： plotly python Flask 文章标签： python 数据可视化 javascript html5

本文链接：https://blog.csdn.net/Micrasoft007/article/details/109221752

版权

python 同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

plotly

2 篇文章 1 订阅

订阅专栏

Flask

2 篇文章 0 订阅

订阅专栏

第一次接触Flask+plotly，过程中踩了很多坑，最后总算达到了目标，给大家分享一下，让每一个初学者都能很快上手plotly。

安装依赖库：

pip install flask
pip install plotly
pip install pandas
pip install numpy

创建flask应用程序：

首先进入项目文件夹，然后创建并进入虚拟环境，创建flask程序

cd 项目目录
python -m venv venv
venv\Scripts\activate
pip install Flask

创建后项目目录如下，create_bar.py和index.html是我后来添加的
在这里插入图片描述

生成测试数据：

新建models文件夹，在models文件夹内新建create_bar.py文件

import plotly as py
import plotly.graph_objs as go
import pandas as pd
import numpy as np
import json

def new_create_plot():
	pyplt = py.offline.plot
	#---以下因为图形和数据不同而不同，以下需要修改---
	N = 40
	x = np.linspace(0, 1, N)
	y = np.random.randn(N)
	df = pd.DataFrame({'x': x, 'y': y}) # creating a sample dataframe
	trace0 = go.Bar(
		x=df['x'], # assign x as the dataframe column 'x'
		y=df['y']
	)
	data = [trace0]
	layout = go.Layout(
		title='xxx可视化作图',
	)
	fig = go.Figure(data=data, layout=layout)
	jsfig=fig.to_json()
	return jsfig

这里面使用了to_json()把数据转换成了json的形式，便于前后端分离的系统使用，下面是plotly官网对to_json()的介绍
在这里插入图片描述

配置路由：

app.py文件

from flask import Flask
from flask_cors import CORS
from flask import Flask, render_template
from models import create_bar
app = Flask(__name__)
CORS(app)

@app.route('/', methods=['GET'])
def ping_pong():
	bar = create_bar.new_create_plot()
	return bar

@app.route('/index')
def index():
	context = create_bar.new_create_plot()
	return render_template("index.html",
		title = 'Home',
		context = context)

if __name__ == '__main__':
    app.run(debug=True)

我们这里做的是直接访问时返回纯数据，访问/index时以图表的形式显示数据，方便做对比。

前端显示：

index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Plotly嵌入Flask可视化作图案例</title>
    <style type="text/css">
    	div.content {padding: 1em 5em;}
    	div.graph {margin: 10px auto;
    		       width: 80%;}
    </style>
   <!--导入在线js库文件-->
   <script type="text/javascript" src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div class='content'>
	<h2>用Python和plotly结合flask可视化作图</h2>
	<div>
		<p>
		 文字部分，可自定义设置。
		</p>
		<p>
			文字部分，可自定义设置：
		</p>
	</div>
    <div class='graph' id='myDiv'>
    <!--展现可视化图标部分-->
    <script>
    	var bars = '{{ context | safe }}';
    	var obj = JSON.parse(bars);
    	Plotly.newPlot('myDiv', obj);
    </script>
   </div>
	<div>
    	<p>从图上可以看出，文字部分，可自定义设置</p>
	</div>
</div>
</body>
</html>

这里有一个坑是Plotly.newPlot的数据在js中必须是json对象类型，一开始从后端传来的是json字符串的格式，调了无数次，最终用JSON.parse成功转成了需要的类型，然后就可以顺利输出了。

以下是plotly官网对JavaScript如何使用plotly的介绍

var data = [
  {
    x: ['giraffes', 'orangutans', 'monkeys'],
    y: [20, 14, 23],
    type: 'bar'
  }
];

Plotly.newPlot('myDiv', data);

可以看出来data是object类型

结果：

图表的形式
在这里插入图片描述
纯数据

小结：

刚开始接触plotly时，通过网上现有教程可以入门，但如果想要进一步提升自己还是得去官网上看文档，把每一个api都了解一下，这样才能够运用自如。因为涉及前端，所以光学会python也不够工作中使用，还需要学习JavaScript和html、css

尖沙咀段坤

关注

2
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
Flask+plotly实现数据可视化

第一次接触Flask+plotly，过程中踩了很多坑，最后总算达到了目标，给大家分享一下，让每一个初学者都能很快上手plotly。安装依赖库：pip install flaskpip install plotlypip install pandaspip install numpy创建flask应用程序：首先进入项目文件夹，然后创建并进入虚拟环境，创建flask程序cd 项目目录python -m venv venvvenv\Scripts\activatepip install F
复制链接

扫一扫