👏🏻👏🏻👏🏻 收集 G2 生态周边仓库 Collecting G2 related projects

[hustcc]

只要是和 AntV G2 相关的开源项目，都可以回帖，等仓库超过 10 个，我们就在 G2 官网开一个页面为大家带来开发者。

包含且不限于：

• React、Vue、Angular 等技术栈的封装
• 基于 G2 的组件封装
• 提供封装 G2 的插件，参考 g2-extentions 实现
• 使用 G2 开发的工具、产品
• ...

期望大家一起，让数据可视化社区活跃起来 🔥🔥🔥🔥🔥，当然也可以在这里提出一些想法，组团来实现！

• g2-extentions: The one-stop shop for official @antv/g2 extensions.
• g2-react: The lightweight React component for @antv/g2.
• ant-design-charts: AntV react component library.
• g2x: React component wrapper for @antv/g2.
• g2v: Vue component wrapper for @antv/g2.
• g2-tiny-bar: The tiny bar mark for @antv/g2.
• g2-ssr-node: The tool for G2 spec's SSR(Server-Side Rendering) in Node.js.
• streamlit-g2: A visualization grammar based on G2 for streamlit.

[hustcc]

g2-react: The lightweight React component for @antv/g2.

import React from "react";
import { Chart } from "@berryv/g2-react";

export function Demo() {
  return (
    <Chart
      options={{
        type: "interval",
        width: 640,
        height: 480,
        data: [
          { genre: "Sports", sold: 275 },
          { genre: "Strategy", sold: 115 },
          { genre: "Action", sold: 120 },
          { genre: "Shooter", sold: 350 },
          { genre: "Other", sold: 150 },
        ],
        encode: { x: "genre", y: "sold" },
      }}
    />
  );
}

[lxfu1]

Ant Design Charts: AntV react component library

import { Bar } from '@ant-design/plots';

const data = [
  { year: '1951 年', value: 38 },
  { year: '1952 年', value: 52 },
  { year: '1956 年', value: 61 },
  { year: '1957 年', value: 145 },
  { year: '1958 年', value: 48 },
];

const DemoBar = () => {
  const config = {
    data,
    xField: 'year',
    yField: 'value',
    colorField: 'year',
  };
  return <Bar {...config} />;
};

[lloydzhou]

1. 基于g2 spec api封装 react 组件
2. ts类型直接使用g2导出类型

https://github.com/lloydzhou/g2x

import { Chart, ... } from "g2x"


function App() {

  return (
    <>
      <Chart width={640} height={480}>
        <SpaceLayer>
          <FetchData value="https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv" format="csv" />
          <Interval>
            <Title title="test title" align="center" />
            <Encode name="x" value="letter" />
            <Encode name="y" value="frequency" />
            <FieldEncode name="color" value="letter" />
            <SortX reverse={true} by="y" />
          </Interval>
          <Interval x={300} y={65} width={300} height={300} legend={false}>
            <FieldEncode name="y" value="frequency" />
            <Encode name="color" value="letter" />
            <StackY />
            <ThetaCoordinate />
          </Interval>
        </SpaceLayer>
      </Chart>
    </>
  )
}

[hustcc]

名字不错。

第二点，其实就用当前 vite，然后多加一些示例，构建出来的内容，上传到 gh-pages 分支即可。

[hustcc]

另外 lock 文件可以删除！Readme 的使用文档可以多补补。

[lloydzhou]

其实这个库，还没有完善，在我看来，还没到一半，最多30%-40%

1. 当前只是处理了一些通过react组件来组织spec的配置项，其实还有一些，需要花时间，慢慢对照g2的文档，以及代码仓库去找出来
2. 还有一个重要的点是，没有处理事件监听相关的逻辑
3. 有可能还需要提供几个hook帮助处理一些常见的逻辑（主要是这个没有使用到真实的业务场景，所以还不知道怎么去抽象）
4. 最后才是周边的，推广相关的，例如做官网，补充文档之类的

[Luvoy]

请问这个思路和AntV G是一回事吗？

[lloydzhou]

请问这个思路和AntV G是一回事吗？

@Luvoy

1. 不是，这个是基于[email protected]新出的spec api封装的 react 组件。使用申明式（jsx）的语法画图。
2. @antv/g 其实是一个更底层的绘图引擎
3. 据我了解@antv/g仓库内有一个@antv/react-g，这个是使用react-reconcilor直接渲染@antv/g的组件

[lloydzhou]

https://github.com/lloydzhou/g2v

前面g2x的vue版本
基于g2 spec api封装 vue 组件

import { Chart, ... } from "g2v"


<template>
  <Chart :width="640" :height="480">
    <SpaceLayer>
      <FetchData value="https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv" format="csv" />
      <Interval>
        <Title title="test title" align="center" />
        <Encode name="x" value="letter" />
        <Encode name="y" value="frequency" />
        <FieldEncode name="color" value="letter" />
        <SortX :reverse="true" by="y" />
      </Interval>
      <Interval :x="300" :y="65" :width="300" :height="300" :legend="false">
        <FieldEncode name="y" value="frequency" />
        <Encode name="color" value="letter" />
        <StackY />
        <ThetaCoordinate />
      </Interval>
    </SpaceLayer>
  </Chart>
</template>

[pearmini]

一个 G2 的复合 Mark：https://github.com/pearmini/g2-tiny-bar

[hustcc]

名字叫 g2-extension-tinybar 比较好~

[pearmini]

有道理

[pearmini]

G2 的 SSR 工具：https://github.com/pearmini/g2-ssr-node

[lloydzhou]

之前群里提到的 BizCharts

[hustcc]

这个还没有升级到 G2 5.0~

[hustcc]

pyg2：A grammar of graphics python library for jupyter notebooks based on G2. 即将升级 ThamaluM/pyG2#4

[hustcc]

streamlit-g2: A visualization grammar based on G2 for streamlit. DEMO

import streamlit as st
from streamlit_g2 import g2

options = {
    "type": "interval",
    "data": [
        { "genre": 'Sports', "sold": 275 },
        { "genre": 'Strategy', "sold": 115 },
        { "genre": 'Action', "sold": 120 },
        { "genre": 'Shooter', "sold": 350 },
        { "genre": 'Other', "sold": 150 },
    ],
    "encode": {
        "x": "genre",
        "y": "sold",
        "color": "genre",
    }
}

g2(options=options, style=None, key="streamlit_g2")

API

Now, There is only one API for streamlit-g2, named g2, see the options in G2 Spec API.

Property	Description	Type	Default
options	the options for the visualization, say chart.options(options)	G2options | null	-
style	the style of the container	CSSProperties	-

[lloydzhou]

https://github.com/GOUYONGCHAO/g2r

基于蚂蚁的antv g2 开发R包，可以快速使用g2画图

[hustcc]

这个和 pyg2 类似，很久没有更新了~