第一次接触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 jsondef new_create_plot():pyplt = py.offline.plot#---以下因为图形和数据不同而不同，以下需要修改---N = 40x = np.linspace(0, 1, N)y = np.random.randn(N)df = pd.DataFrame({'x': x, 'y': y}) # creating a sample dataframetrace0 = 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

Flask+plotly实现数据可视化相关推荐

Flask+VUE+plotly实现数据可视化
前期准备: 前期需先实现Flask+plotly输出图表,可以先查看我的上一篇博客 Flask+plotly实现数据可视化(点击查看) 安装VUE: 准备采用 npm(Nodejs下的包管理器)的方式 ...
Hadoop+hive+flask+echarts大数据可视化项目之hive环境搭建与系统数据的分析思路
Hadoop+hive+flask+echarts大数据可视化项目(四) --------------hive环境搭建与系统数据的分析思路---------------- 关注过Hadoop+hive ...
Hadoop+hive+flask+echarts大数据可视化之系统数据收集
Hadoop+hive+flask+echarts大数据可视化项目(一) --------------系统数据收集---------------- 谈到大数据的项目,一般以数据可视化为主体,收集大数据 ...
Hadoop+hive+flask+echarts大数据可视化项目之系统数据整合和hadoop环境搭建
Hadoop+hive+flask+echarts大数据可视化项目(二) --------------系统数据整合和hadoop环境搭建---------------- 关注Hadoop+Hive+F ...
Hadoop+hive+flask+echarts大数据可视化项目之flask结合echarts前后端结合显示hive分析结果
Hadoop+hive+flask+echarts大数据可视化项目(五) ------flask与echarts前后端结合显示hive分析结果------- 关注过Hadoop+hive+flask+ ...
基于plotly数据可视化_如何使用Plotly进行数据可视化
基于plotly数据可视化 The amount of data in the world is growing every second. From sending a text to clicki ...
基于python+flask实现视频数据可视化
使用爬虫对视频弹幕进行爬取并保存为csv文件,导入数据库中,进而实现前后端交互功能. 数据集中包含的数据分别为爬取的热门视频的标题.播放量.弹幕量.收藏量.综合得分以及视频的类别等信息,便于后续我们 ...
【毕业设计】基于python 爬虫 flask的疫情数据可视化系统
1 前言
Python数据可视化——Plotly绘制散点图、堆积柱状图、饼图、旭日图、分布图、箱线图、时间序列图、多子图、k线图
文章目录一.数据来源二.导入数据三.散点图Scatter 四.堆积柱状图Stacked Bar 五.饼图六.旭日图Sunburst 七.分布图Distplot 八.箱线图Boxplot 九.热 ...

Flask+plotly实现数据可视化