羡慕BI软件的可视化？python终于可以做出联动可视化报告

前言

很长一段时间没有更新了，但我不是在偷懒。这段时间一直学习前端的知识，之前也有一些小工具的输出：

• pandasUI，界面操作即可生成对应的pandas 代码
• pandas-query，方便查询 pandas 中的各种方法

这些只是我入门阶段的小目标输出。但我一直有一个非常想实现的功能—— 能够简单又灵活生成堪比 BI 软件的可视化联动报告。

现在我真的做出来了！这就是 pyvisflow，已经发布在 pip 上，以下是安装：

pie install pyvisflow

本来取名 pyvision，可惜这个名字被别人用了

这个库的特点：

1. 灵活自由的交互。所有组件的每个属性都能互相联动
2. 超强大简单的联动语法。与 python 中属性赋值一样简单
3. 零依赖输出。输出为一个 html 文件，用户只需要用浏览器打开即可使用，保留所有的交互效果
4. 强类型标注，所有api都有充足的智能提示

接下来我就用几个简单入门例子，好好了解这些特点

一切可联动

首先，我希望制作一个这样子的页面：

很简单的2个部分，一个是一段文字，下方再来一个输入框。

看看 pyvisflow 怎么使用：

import pyvisflow as pvf

md=pvf.markdown('''
# pyvisflow 功能

- 制作动态交互数据报告
- 直观联动设置
- 零依赖结果

你输入的内容是：
''')

input = pvf.input()

pvf.to_html('demo1.html')

• 行1：导入，并且给一个简单的名字，方便后续使用
• 行3-11：pvf.markdonw() ，你可以使用 markdown 语法快速创建静态内容
• 行13：pvf.input() ，创建一个输入框
• 行15：pvf.to_html() ，输出结果

执行后，基目录下就会得到一个 demo1.html 文件，用浏览器即可打开(一般情况下，双击就是默认浏览器打开)，即可看到效果。

• 很明显，每次调用 pvf.xxxx 都会在页面上输出相应的物件
• 每个物件会独占一行

pyvisflow 提供了很多方便的方法让你可以调整他们的样式（宽度，背景颜色，字体等等）

"你这只是一个静态页面，我随便用一个第三方库都能做到！"

现在我们来看看 pyvisflow 基本的联动能力，我们希望文本内容中的 "你输入的内容是：" 的后面，就是 下方输入框的内容

简单修改下代码：

• 行10：在 markdown 文本中，我们使用 {{}} 作为占位符，里面的 text 是自定义，为了在后面使用
• 行15：通过 md 对象的 set 方法，把 input.value 属性(这个属性表示输入框的输入内容)赋值给 text 占位符

再次运行，现在用浏览器再次打开(如果文件名没有变化，可以在之前的基础上刷新一下浏览器即可)，效果如下：

pyvisflow 的宗旨是一切可联动！

现在我们多加一个输入框，希望 第一个输入框的内容与第二个输入框的内容同步 ：

• 行14：新增一个输入框
• 行15：输入框2 的输入内容 等于(=) 输入框1的输入内容

就这么简单！再次执行，看看效果：

轻松制作、轻松分发

我一直非常注重易用性，因此我在编写 pyvisflow 的时候总是为每个方法标注具体类型，组件的属性都是用代码自动生成，因此他们都有充足的智能提示。

还是接上面的例子再说明。

刚刚是输入框1的内容同步到输入框2，我们在平常的网页上看到的输入框，在还没有输入内容之前都有一个水印文字提示。这个叫 placeholder

那么现在我们改成同步到水印文字提示吧，如果你使用 vscode 或 pycharm 或 jupter notebook ，都能看到提示：

也看看他的效果：

这里也展示了 一切可联动 的效果。

没错，只要属性之间值有效，任何物件的任何属性都能互相绑定联动。

同时，所有的效果都是基于网页技术，是不依赖 python 的，因此你只要把输出的文件发给别人，别人有浏览器就可以看到这些联动效果

当然，你也可以从 web 服务上发布。之后我也会制作 pyvisflow-server 版本，这是一个依赖 python 的版本，同时他也能获得更加自由多变的联动效果

表格与图表

目前为止也只是小打小闹，在可视化报告里面少不了图表与表格。

我们就拿泰坦尼克号的数据作为示例，这个示例会让你看到 pyvisflow 强大的联动能力

先看看我们希望的结果页面：

• 第一行是一个标题
• 第二行有2个图表并排
• 第三行是一个表格

看看代码：

• 这些是数据处理的，不多做解析，后面的图表与表格就是用这些数据

pyvisflow 的调用：

• 行12：标题用 markdown 制作即可
• 行16：pvf.cols() 可以把一行划分出多列，这个方法会返回一个元组，元组的数量就看你传入的数字是多少。
• 行18、19：现在我们希望在左边的列放置一个图表，所以现在需要使用刚刚得到的 left 对象(他有创建物件的方法) ,通过 echart 方法，把数据传入。
• 由于 echart 图表的配置非常多，所以我提供了一些快速制作图表的方法，通过 pie.utils.use_pie() ，就可以制作饼图
• 行21、22：同理制作面积图
• 行24：pvf.dataTable()，制作表格，很简单，不多说明

执行看看效果：

• 表格自带分页(分页的配置都可以在 表格对象中的属性进行修改和联动绑定)
• 每个图表都是使用 echart 制作，本身有一些基本的动画和联动效果。
• 左边是性别生还比例饼图，右边是年龄生还人数面积图(包含所有的性别)

这种简单的联动效果，你使用 pyechart 也能做出来，这没啥好说。

接下来， 我们就用 pyvisflow ，使得 他们都能交互联动起来 。

首先，我们希望点击左边的饼图某个区域(某个性别)，右边的面积图显示对应性别的年龄面积图：

• 行25：面积图做数据过滤，使用 area.filters 方法。方法里面我们要表达 面积图的数据中的 sex 字段 等于 拼图 点击信息中的系列名字 。
• 使用 图表对象的 data 属性，可以访问对应字段的数值
• 使用 图表对象的 clickInfo 属性，可以访问点击图表时的信息，其中 name 是系列名字。

执行一下，看看效果：

下方的表格同样可以联动：

• table 有一个 query 方法，由于 table 对象本身就表示数据，所以你可以直接使用 table['对应字段'] 访问数据

就这么简单，表达出表格的数据应该与饼图点击的性别联动，效果很好：

最后，我们发现右边面积图没有标题，我们很难看出来他要表达啥，为此我们给他的标题属性绑定：

• 这就是 pyvisflow 的神奇之处，你可以使用 python 常用的运算

最后的效果，注意右边面积图的顶部，在左边饼图点击后，就会出现标题：

最后

由于 pyvisflow 的实现机制非常简单，你可以使用普通的 python 自定义函数即可组装自己的联动物件，简单复用代码。

此外，pyvisflow 之后还有增强很多功能，比如可以让用户自己拖入 excel 表格数据，图表下钻 等等。pyvisflow 提供了灵活的机制，让你定制属于自己的联动交互数据报告，以后我会用更多的案例介绍更多的联动玩法