可以参考旧版文档,文章中工作量最大的部分是 API 手册,羽熙已经完成。接下来的文档是将内容串起来。

  • 10-20 号前完成 教程 + API(频率大概是两周一篇,部分同学是一周一篇,到时候可以社区同学帮忙一起看)
  • 高阶部分优先级比较低,10-20 后再分配,11-15 之前问题应该不大。

社区同学欢迎认领和参入。


教程

1. G2 简介(羽熙)已完成

内容基本保持不变,可以增加:

  • 图形语法
  • riddle demo
  • 相关项目的列表
  • 建议的文档阅读方式

去除:

  • 代码示例,直接使用 riddle

2. 快速上手(羽熙)已完成

内容基本保持不变,可以增加:

  • 创建一个 chart 的步骤,以及各种 可视化概念 到下一节

3. 可视化基础概念(新茗)

这里强调的是可视化技术的基础概念,以 G2 的实现来举例介绍一个图形中可能包含的可视化元素和。

图形语法(新茗)已完成

图形组件(翎刀)已完成

一张图标注基本的可视化组件。然后分别介绍 geometry、axis、legend、tooltip、annotation,slider、scrollbar。简单介绍它的作用即可,具体的配置到详细教程 - 坐标轴

几何图形(Geometry)已完成 新茗

  • 概览
  • 点图 point
  • path
  • area
  • interval
  • polygon
  • schema

图形元素(Element)已完成 新茗

View 视图(逍为)已完成

交互语法(逍为)已完成

坐标系(艾因)已完成

他的作用,现有坐标系,如何使用坐标系?

数据调整(巡一、艾因)已完成

Adjust

4. DataSet

复用之前的文档

5. 教程和文章(福晋)进入迭代

现有的直接整合目录结构即可,暂时不用太大变动。自己写一些必要的文章,或者社区文章的链接。

  • 详解 G2 的数据处理流程
  • 渲染引擎:Canvas 还是 SVG?
  • 如何实现自定义图例?
  • 如何使用配置项的方式创建图表
  • G2 架构演进史
  • 使用导出 G2 画布为图片

6. FAQ

7. 升级指南

8. 联系我们(福晋)已完成

可以逐步迭代增加高级进阶篇、工程环境配置注意事项,FQA 等

API 文档

完成状态:

待完成 目前线上版本缺少的章节
待补充 和目前线上版本对比,缺少原理说明,需要晚上概念说明或者补充晚上里面的配置说明
进入迭代 内容基本符合预期,进入迭代,严谨表述等
已完成 完成

1. G2 详细手册

绘制图表 - Chart 进入迭代(羽熙)

突出几个常用图表的绘制方式,总结出绘制图表的一些要素,并在下面详细介绍。

  • new Chart()
  • data()
  • render()

数据 - Data 进入迭代(羽熙)

度量 - Scale 进入迭代(艾因)

坐标系 - Coordinate 进入迭代(艾因)

调整 - Adjust 进入迭代(巡一、艾因)

图形 - Geometry 进入迭代 (新茗)

介绍现有 Geometry 以及 Geometry 的详细使用配置。

坐标轴 - Axis 进入迭代 (翎刀)

图例 - Legend 进入迭代(福晋)

提示 - Tooltip 进入迭代(福晋)

标注 - Annotation 进入迭代(翎刀)

数据标签 - Label 进入迭代(新茗)

样式 - Style 进入迭代(新茗)

缩略轴 - Slider 进入迭代(翎刀)

Darren 正在写初稿,刀哥之后请负责把关 review 内容

滚动条 - Scrollbar 进入迭代(翎刀)

Darren 正在写初稿,刀哥之后请负责把关 review 内容 反馈:使用chart.option(‘scrollbar’,…)配置scrollbar,未能达到滚动效果,height也不生效。

  1. //https://g2.antv.vision/zh/examples/gallery/column#column2
  2. const chart = new Chart({
  3. container: 'container',
  4. width: 300,
  5. height: 500,
  6. padding: [50, 20, 50, 20],
  7. });
  8. ...
  9. chart.option('scrollbar', {
  10. height: 50,
  11. });

事件 - Event 已完成 (逍为)

  • 所有 event name list

主题 - Theme 已完成 (珂甫)

需要增加如何使用自定义色板的方法。

动画 - Animate 进入迭代 (福晋)

拆解动画过程,介绍动画的配置含义,链接自定义动画的链接。

分面 - Facet 进入迭代(珂甫)

介绍现有分面和使用方式,以及链接自定义分面。

交互 - Interaction 待补充 (逍为)

介绍已有交互,以及自定义交互的实现原理。

  • 所有 interaction 表现 gif / 部分 demo

2. 高级进阶功能(新茗、翎刀,逍为)

每两周一篇吧,差不多 10 月底能完成。

自定义 Shape - Shape(新茗)

registerShape,registerShapeFactory。registerShapeFactory 建议不暴露,不用写。

自定义主题 - Theme(珂甫)

registerTheme

自定义交互 - Interaction(翎刀)

registerAction、registerInteraction


自定义动画 - Animate(福晋)

registerAnimation

自定义分面 - Facet(逍为)

自定义图形 - Geometry(翎刀)

registerGeometry,1122 前来不及建议不透出。

自定义标签布局 - Label Layout(新茗)

registerGeometryLabel、registerGeometryLabelLayout。我建议 1122 都不用写这部分,我相信没有一个非 AntV 的开发者用这个。


自定义 tickMethod(福晋)

scale 自定义 tickMethod 算法。

3. 绘图属性速查(逍为)已完成

在自定义 shape 中都会用到很多的绘图,因为底层都是基于 G,所以理论上需要 G 提供这样的文档。这里就单独新开一节。 这里可以随着自定义部分补充增加。

ShapeAttrs