初探可视化新秀PyG2Plot

一：初识PyG2Plo

Github上是这样介绍PyG2Plot的：

Python3 binding for @AntV/G2Plot which an interactive and responsive charting library. Based on the grammar of graphics, you can easily make superior statistical charts through a few lines of code. PyG2Plot is inspired by pyecharts.

Python 3封装 ANTV/G2TRAGE，ANTV/G2TRAGE是一个交互式和响应的制图库。G2Plot 是一套简单、易用、并具备一定扩展能力和组合能力的统计图表库。您可以通过几行代码轻松地制作出优秀的统计图表，PyG2Plot的灵感来自pyecharts。

如果你接触过pyechats，实用PyG2Plot你会觉得很熟悉，包括编码的函数，编码的结构等，包括出来的图形在风格上也很像。可能是PyG2plot刚出来不久的缘故，网上现成的用例资料还是比较少，我也是通过官网出来的接口一个个参数的摸索。下面给出官网API的链接：https://g2plot.antv.vision/zh/docs/api/plot-api

PyG2Plot的Demo用例还是非常丰富的，如果你的目标图标功能不复杂，完全可以照搬过来改改就可以了。

二：功能探索

1，安装
开始code之前，得装好PyG2Plot库，如果能方便的访问外网，配置好pip源，直接pip安装即可

pip install pyg2plot

如果不方便访问外网，可以找个能访问外网的机器从github上下载源码，离线安装
GitHub地址：https://github.com/hustcc/PyG2Plot#pyg2plot
2，主要函数
从源码上看，目前提供的接口函数非常有限（源码查看pyg2plot文件夹下的plot.py文件）

Plot(plot_type: str): 获取 Plot 对应的类实例。
plot.set_options(options: object): 给图表实例设置一个 G2Plot 图形的配置。
plot.render(path, env, **kwargs): 渲染出一个 HTML 文件，同时可以传入文件的路径，以及 jinja2 env 和 kwargs 参数。
plot.render_notebook(env, **kwargs): 将图形渲染到 jupyter 的预览。

实际上在用的过程中，并不需要那么丰富的函数，可以通过set_options传入丰富的配置来达到自己的图标开发目标
3，CODING

from pyg2plot import Plot
import csv

导入pyg2plot库里的Plot函数

line = Plot("Line")

调用Plot函数，传入参数"Line"，我们接下来要尝试画一福曲线图

line.set_options(
{'padding': 60,'autoFit': True,#'smooth': True,'data': testData,'xField': 'Time','yField': 'TotalVolume','seriesField': 'Thread','color': ['#ffd500', '#82cab2', '#193442', '#d18768','#7e827a'],'pointStyle':{'fillOpacity': 0.8,'stroke': '#bbb'},'xAxis':{'line':{'style':{'stroke': '#aaa'}},'title':{'text': 'TIME','style': {'fontSize': 16,}}},'yAxis':{'line':{'style':{'stroke': '#aaa'}},'title':{'text': 'VOLUME','style': {'fontSize': 16,}}},'animation':{'appear':{'animation':'path-in','duration':5000},},'slider':{'start':0,'end':5000,'height':20,'backgroundStyle':{"fill":"blue"},},
})

下面对用到的参数进行详细的解释

1，padding：画布的 padding 值，代表图表在上右下左的间距，可以为单个数字 16，或者数组 [16, 8, 16, 8] 代表四个方向，或者开启 auto，由底层自动计算间距。另外还有个参数appendPadding：额外增加的 appendPadding 值，在 padding 的基础上，设置额外的 padding 数值，可以是单个数字 16，或者数组 [16, 8, 16, 8] 代表四个方向。
2，autoFit：图表是否自适应容器宽高。当 autoFit 设置为 true 时，width 和 height 的设置将失效。
3，smooth：曲线是否平滑。该参数如果设置为True，画出来的就是曲线，默认是折线样式
4，data：设置图表数据源。数据源为对象集合，
例如：const data = [
{ time: ‘1991’，value: 20 },
{ time: ‘1992’，value: 20 },
];
5,xField:图形在 x 方向对应的数据字段名，一般是横向的坐标轴对应的字段。比如：要看不同班级的人数情况，那么班级字段就是对应的 xField。
6,yField:图形在 y 方向对应的数据字段名，一般是纵向的坐标轴对应的字段。比如：要看不同班级的人数情况，那么人数字段就是对应的 yField。
7,seriesField:分组字段。用于同时看一个维度中不同情况的指标需求。比如：我们看不同大区最近 30 天的销售额趋势情况，那么这里的大区字段就是 seriesField。如本例中要展示每个线程上的数据，该配置项就是Thread
8,指定点的颜色。如没有配置 colorField，指定一个单值即可。对 colorFiled 进行了配置的情况下，即可以指定一系列色值，也可以通过回调函数的方法根据对应数值进行设置
// 设置单一颜色
{
color: ‘#a8ddb5’
}
// 设置多色
{
colorField: ‘type’, // 部分图表使用 seriesField
color: [’#d62728’, ‘#2ca02c’, ‘#000000’],
}
9,pointStyle:是指折线样式
10,xAxis和yAxis：配置x轴和y轴的一些属性如名字，大小等，具体可参考官网的API
11,animation:设置动画效果，如果不设置运行展示出来的就是静态的曲线
12,slider:设置缩略轴，对于数据量大的曲线，缩略轴一般都是必须要的

由于每个图标的需求不一样，则传入的数据也不一样，但是数据的格式还是要符合P2G2Plot的要求
testData的数据结构就如下面的结构（数据是随手写的）

[{'Time': '02:37:07', 'Thread': '0', 'UpVolume': 1111, 'DnVolume': 1111, 'TotalVolume': 2222}, {'Time': '02:37:07', 'Thread': '1', 'UpVolume': 2222, 'DnVolume': 3333, 'TotalVolume': 5555}, {'Time': '02:37:07', 'Thread': '2', 'UpVolume': 3333, 'DnVolume': 5555, 'TotalVolume': 8888}]

# 1. 渲染成 html 文件
line.render("plot.html")

在程序的本目录下会生成plot.html文件

三：曲线图展示