Flask+plotly实现数据可视化

it2025-12-26 8

第一次接触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>  <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

最新回复(0)