前言

🎨 PyG2Plot 是 @AntV/G2Plot 在 Python3 上的封装。 G2Plot 是一套简单、易用、并具备一定扩展能力和组合能力的统计图表库，基于图形语法理论搭建而成。

  • G2Plot是蚂蚁开源的一款可视化图标库，官方地址：https://antv-g2plot.gitee.io/zh
  • 因为PyG2Plot没做什么二次开发，所以文档直接看G2Plot的文档就行；
  • PyG2Plot的项目地址：https://github.com/hustcc/pyg2plot

安装

pip install pyg2plot

简单示例

首先pyg2plot需要的数据格式类似如下：

[
    { "year": "1991", "value": 3 },
    { "year": "1992", "value": 4 },
    { "year": "1993", "value": 3.5 },
    { "year": "1994", "value": 5 },
    { "year": "1995", "value": 4.9 },
    { "year": "1996", "value": 6 },
    { "year": "1997", "value": 7 },
    { "year": "1998", "value": 9 },
    { "year": "1999", "value": 13 },
]

对于直角坐标系的图表必须的参数有：

  • data：数据项，单个数据项以Dict存储；
  • xField：指定x轴所用的数据，使用dict中的key，如year；
  • yField：指定y轴所用的数据，使用dict中的key，如value；

代码示例：

line = Plot("Line")

line.set_options({
  "data": [
    { "year": "1991", "value": 3 },
    { "year": "1992", "value": 4 },
    { "year": "1993", "value": 3.5 },
    { "year": "1994", "value": 5 },
    { "year": "1995", "value": 4.9 },
    { "year": "1996", "value": 6 },
    { "year": "1997", "value": 7 },
    { "year": "1998", "value": 9 },
    { "year": "1999", "value": 13 },
  ],
 "xField": "year",
 "yField": "value",
})

line.render_notebook()

常规配置

接下来尝试一下G2Plot中的一些常规配置项，这边就以柱形图为例。

# 注意在G2Plot中柱形图叫Column，而不是Bar
bar = Plot("Column")

bar.set_options({
  "data": [
    { "year": "1991", "value": 3 },
    { "year": "1992", "value": 4 },
    { "year": "1993", "value": 3.5 },
    { "year": "1994", "value": 5 },
    { "year": "1995", "value": 4.9 },
    { "year": "1996", "value": 6 },
    { "year": "1997", "value": 7 },
    { "year": "1998", "value": 9 },
    { "year": "1999", "value": 13 },
  ],
  "xField": "year",
  "yField": "value",
})

bar.render_notebook()

分组柱形图

在G2Plot中分组柱形图，其实就是一个柱形图中包含多个系列的数据。

通过seriesField执行分组的字段

bar = Plot("Column")

# 数据太长了，影响阅读，这里只是格式示例
data = [
    {
        "name": 'London',
        "月份": 'Jan.',
        "月均降雨量": 18.9,
    }
]

bar.set_options({
  "data": data,
  "xField": "月份",
  "yField": "月均降雨量",
  "seriesField":"name",
  # 是否分组柱状图
  "isGroup":True,
  # 是否堆叠
  # "isStack":True,
  "columnStyle": {
        # 圆角
        "radius": [20, 20, 20, 20],
      }
})

bar.render_notebook()

设置主题

目前默认的内置主要要两套：default 和 dark；

不过这个dark看起来只是把背景变成黑色了？？？

G2Plot中可以自己定制主题，不过在PyG2Plot中尝试了一下，并未发现API支持。

bar = Plot("Column")

bar.set_options({
  "data": data,
  "xField": "月份",
  "yField": "月均降雨量",
  "seriesField":"name",
  # 是否分组柱状图
  "isGroup":True,
  # 是否堆叠
  # "isStack":True,
  "columnStyle": {
        # 圆角
        "radius": [20, 20, 20, 20],
      },
  # 主题配置
  "theme":'dark'
})

bar.render_notebook()

标签

支持使用JS回调函数来自定义显示内容，也包含字体风格的设置。

from pyg2plot import Plot, JS

bar = Plot("Column")

bar.set_options({
    "data": data,
    "xField": "月份",
    "yField": "月均降雨量",
    "seriesField": "name",
    # 是否分组柱状图
    "isGroup": True,
    # 是否堆叠
    # "isStack":True,
    "columnStyle": {
        # 圆角
        "radius": [20, 20, 20, 20],
    },
    # 标签配置
    "label": {
        # 支持JS回调函数
        "content": JS('''function(item) {return `${item.月均降雨量}mm`;}'''),
        "position":"middle",
        "layout": [
          {
            "type": 'adjust-color',
          },
        ],
    },
})

bar.render_notebook()

长宽设置

这里需要注意一下，设置长宽时需要将autoFit设置为False，否则无效；

autoFit表示自适应大小。

bar = Plot("Column")

bar.set_options({
    "data": data,
    "xField": "月份",
    "yField": "月均降雨量",
    "seriesField": "name",
    # 是否分组柱状图
    "isGroup": True,
    # 是否堆叠
    # "isStack":True,
    "columnStyle": {
        # 圆角
        "radius": [20, 20, 20, 20],
    },
    # 标签配置
    "label": {
        # 支持JS回调函数
        "content": JS('''function(item) {return `${item.月均降雨量}mm`;}'''),
        "position": "middle",
        "layout": [
            {
                "type": 'adjust-color',
            },
        ],
    },
    # 设置画布大小
    # 需要将autoFit设置为False，否则无效
    "height": 500,
    "width": 1000,
    # 默认自适应大小
    "autoFit": False
})

bar.render_notebook()

颜色配置

图形颜色配置，多个图形则使用list传入，如`color: ['red', 'blue']`

同样支持渐变配色——径向渐变和线性渐变

参数含义如下：

线性渐变

径向渐变

bar = Plot("Column")

bar.set_options({
    "data": data,
    "xField": "月份",
    "yField": "月均降雨量",
    "seriesField": "name",
    # 是否分组柱状图
    "isGroup": True,
    # 是否堆叠
    # "isStack":True,
    "columnStyle": {
        # 圆角
        "radius": [20, 20, 20, 20],
        # 透明度
        "fillOpacity": 0.8,
        # 边框颜色
        "stroke": 'black',
        # 边框线宽
        "lineWidth": 1,
        # 边框颜色透明度
        "strokeOpacity": 0.7,
        # 阴影配置，颜色，偏移量
        "shadowColor": 'rgba(0,0,0,0.5)',
        "shadowBlur": 10,
        "shadowOffsetX": 5,
        "shadowOffsetY": 5,
        # 鼠标样式
        "cursor": 'pointer'
    },
    # 标签配置
    "label": {
        # 支持JS回调函数
        "content": JS('''function(item) {return `${item.月均降雨量}mm`;}'''),
        "position": "middle",
        "layout": [
            {
                "type": 'adjust-color',
            },
        ],
    },
    # 图形颜色
    # 线性渐变色
    "color": [
        'l(270) 0:#ffffff 0.5:#7ec2f3 1:#1890ff',
        'l(270) 0:#ffffff 0.5:#FFB6C1 1:#DC143C'
    ]
})

bar.render_notebook()

坐标轴

支持坐标轴标签，网格线，标题等配置；

bar = Plot("Column")

bar.set_options({
    "data": data,
    "xField": "月份",
    "yField": "月均降雨量",
    "seriesField": "name",
    # 是否分组柱状图
    "isGroup": True,
    # 是否堆叠
    # "isStack":True,
    "columnStyle": {
        # 圆角
        "radius": [20, 20, 20, 20],
        # 透明度
        "fillOpacity": 0.8,
        # 边框颜色
        "stroke": 'black',
        # 边框线宽
        "lineWidth": 1,
        # 边框颜色透明度
        "strokeOpacity": 0.7,
        # 阴影配置，颜色，偏移量
        "shadowColor": 'rgba(0,0,0,0.5)',
        "shadowBlur": 10,
        "shadowOffsetX": 5,
        "shadowOffsetY": 5,
        # 鼠标样式
        "cursor": 'pointer'
    },
    # 标签配置
    "label": {
        # 支持JS回调函数
        "content": JS('''function(item) {return `${item.月均降雨量}mm`;}'''),
        "position": "middle",
        "layout": [
            {
                "type": 'adjust-color',
            },
        ],
    },
    # 图形颜色
    # 线性渐变色
    "color": [
        'l(270) 0:#ffffff 0.5:#7ec2f3 1:#1890ff',
        'l(270) 0:#ffffff 0.5:#FFB6C1 1:#DC143C'
    ],
    # 坐标轴配置
    "yAxis": {
        # 坐标轴标题
        "title": {
            "text": "降水量/mm"
        },
        # 网格线
        "grid": {
            "line": {
                "style": {
                    "stroke": 'black',
                    "lineWidth": 1,
                    "strokeOpacity": 0.2,
                    "shadowColor": 'rgba(0,0,0,0.5)',
                    "shadowBlur": 3,
                    "shadowOffsetX": 2,
                    "shadowOffsetY": 2,
                    "cursor": 'pointer'
                }
            }
        }
    }
})

bar.render_notebook()

Pyecharts VS PyG2Plot

首先这是通过Pyecharts制作的图表效果：

我这边尽可能的通过PyG2Plot去还原，最后效果如下：

scatter = Plot("Scatter")

scatter.set_options({
    'width': 1000,
    'height': 800,
    "autoFit": False,
    "appendPadding": 20,
    "data": g2_data,
    "xField": "人均GDP",
    "yField": "人均寿命",
    "colorField": '年份',
    "color": [
        'r(0.4, 0.3, 1) 0:rgb(251, 118, 123) 1:rgb(204, 46, 72)',
        'r(0.4, 0.3, 1) 0:rgb(129, 227, 238) 1:rgb(25, 183, 207)'
    ],
    "sizeField": 'GDP总量',
    "size": JS("""function (data) {return Math.sqrt(data.GDP总量) / 1e3;}"""),
    "shape": 'circle',
    "title": {
        "visible": True,
        "text": '1990 与 2015 年各国家人均寿命与 GDP'
    },
    "pointStyle": {
        "lineWidth": 0,
        # 阴影配置，颜色，偏移量
        "shadowColor": 'rgba(0,0,0,0.5)',
        "shadowBlur": 10,
        "shadowOffsetX": 5,
        "shadowOffsetY": 5,
        # 透明度
        "fillOpacity": 0.7
    },
    "yAxis": {
        "title": {
            "text": "人均寿命"
        },
        "nice": True,
        "line": {
            "style": {
                "stroke": '#000',
            },
        },
        "grid": {
            "line": {
                "style": {
                    "stroke": '#cdd0d5',
                    "lineDash": [4, 5],
                },
            },
        }
    },
    "xAxis": {
        # 坐标轴标题
        "title": {
            "text": "人均GDP"
        },
        "grid": {
            "line": {
                "style": {
                    "stroke": '#cdd0d5',
                    "lineDash": [4, 5],
                },
            },
        },
        "line": {
            "style": {
                "stroke": '#000',
            },
        },
    },
    "legend": {
        "layout": 'horizontal',
        "position": 'top-right'
    },
    "tooltip": {
        "fields": ['国家', '年份', 'GDP总量', '人均GDP', '人均寿命']
    },
    'theme': {
        "styleSheet": {
            "backgroundColor": 'r(0.3, 0.3, 0.8) 0:#f7f8fa 1:#cdd0d5'
        },
    }
})

scatter.render_notebook()

主要有两个地方没法实现：

  • G2Plot中不支持标题，貌似之前老的版本支持，最新的版本已经去掉了；
  • G2Plot的坐标轴标题只能设置距离坐标轴的距离，不能定义位置；

除此之外，其他基本都能产不多的实现。

在支持的图表方面，G2Plot似乎不怎么支持地理图表，看了官网所有的示例，只有一个热力图看起来有点关系。

相比起Echarts来还是略显年轻呀~~

欢迎一键三连，有任何问题欢迎评论区留言~~

# python # javascript
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

cover

收藏！从AI新手到架构师，这份系统学习路径图助你快速入门大模型

avatar 2048 AI社区
cover

程序员AI量化理财体系课【邢不行】量化投资 视频课 25集

avatar 2048 AI社区
cover

2026年高薪就业赛道揭晓：AI大数据、大模型、AIGC与云计算，错过等五年！

avatar 2048 AI社区