feat(custom Shape): 添加 Shape 文档 以及 添加 三个 自定义 Shape demo #3246
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
ai-qing-hai
commented
Jun 8, 2022
ai-qing-hai
commented
- 添加三个 自定义 Shape demo
- 饼图 添加自定义形状配置
- 添加 Shape 文档
![accesslint[bot]](https://avatars.githubusercontent.com/in/1502?s=60&v=4){kind=small}
|
|
||
| | Geometry 类型 | 描述 | | ||
| | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | ||
| | point | 点的绘制很简单，只要获取它的坐标以及大小即可，其中的 `size` 属性代表的是点的半径。 <img src="https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*IF_yR6LCyw4AAAAAAAAAAABkARQnAQ" style="width: 50%;"> | |
There was a problem hiding this comment.
This image is missing a text alternative. This is a problem for people using screen readers.
|
|
||
| | Geometry 类型 | 描述 | | ||
| | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | ||
| | point | 点的绘制很简单，只要获取它的坐标以及大小即可，其中的 `size` 属性代表的是点的半径。 <img src="https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*IF_yR6LCyw4AAAAAAAAAAABkARQnAQ" style="width: 50%;"> | |
There was a problem hiding this comment.
This image is missing a text alternative. This is a problem for people using screen readers.
| | Geometry 类型 | 描述 | | ||
| | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | ||
| | point | 点的绘制很简单，只要获取它的坐标以及大小即可，其中的 `size` 属性代表的是点的半径。 <img src="https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*IF_yR6LCyw4AAAAAAAAAAABkARQnAQ" style="width: 50%;"> | | ||
| | line | 线其实是由无数个点组成，在 G2 中我们将参与绘制的各个数据转换成坐标上的点然后通过线将逐个点连接而成形成线图，其中的 `size` 属性代表的是线的粗细。 <img src="https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*8YQzSpmUnEAAAAAAAAAAAABkARQnAQ" style="width: 50%;"> | |
There was a problem hiding this comment.
This image is missing a text alternative. This is a problem for people using screen readers.
| | Geometry 类型 | 描述 | | ||
| | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | ||
| | point | 点的绘制很简单，只要获取它的坐标以及大小即可，其中的 `size` 属性代表的是点的半径。 <img src="https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*IF_yR6LCyw4AAAAAAAAAAABkARQnAQ" style="width: 50%;"> | | ||
| | line | 线其实是由无数个点组成，在 G2 中我们将参与绘制的各个数据转换成坐标上的点然后通过线将逐个点连接而成形成线图，其中的 `size` 属性代表的是线的粗细。 <img src="https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*8YQzSpmUnEAAAAAAAAAAAABkARQnAQ" style="width: 50%;"> | |
There was a problem hiding this comment.
This image is missing a text alternative. This is a problem for people using screen readers.
| | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | ||
| | point | 点的绘制很简单，只要获取它的坐标以及大小即可，其中的 `size` 属性代表的是点的半径。 <img src="https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*IF_yR6LCyw4AAAAAAAAAAABkARQnAQ" style="width: 50%;"> | | ||
| | line | 线其实是由无数个点组成，在 G2 中我们将参与绘制的各个数据转换成坐标上的点然后通过线将逐个点连接而成形成线图，其中的 `size` 属性代表的是线的粗细。 <img src="https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*8YQzSpmUnEAAAAAAAAAAAABkARQnAQ" style="width: 50%;"> | | ||
| | area | area 面其实是在 line 线的基础之上形成的，它将折线图中折线与自变量坐标轴之间的区域使用颜色或者纹理填充。<img src="https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*JRyMSIpRfRwAAAAAAAAAAABkARQnAQ" style="width: 50%;"> | |
There was a problem hiding this comment.
This image is missing a text alternative. This is a problem for people using screen readers.
| | interval | interval 默认的图形形状是矩形，而矩形实际是由四个点组成的，在 G2 中我们根据 pointInfo 中的 x、y、size 以及 y0 这四个值来计算出这四个点，然后顺时针连接而成。<img src="https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*soWnSLeska8AAAAAAAAAAABkARQnAQ" style="width: 50%;"> | | ||
| | polygon | polygon 多边形其实也是由多个点连接而成，在 pointInfo 中 x 和 y 都是数组结构。<img src="https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*anXLQ72bP78AAAAAAAAAAABkARQnAQ" style="width: 50%;"> | | ||
| | violin | violin 小提琴图也是由多个点连接而成。 `pointInfo` 中，x 是小提琴中心点的 x 坐标，size 是小提琴的最大宽度，而 \_size 和 y 是相同长度的 number 数组，每一对 (\_size, y) 表示小提琴图上的一个采样点。\_size 是采样点处的概率密度，即小提琴的宽度；y 是采样点在 y 轴上的位置。<img src="https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*RB6IRobZJBoAAAAAAAAAAAAAARQnAQ" style="width: 98px;" alt="violin"> | | ||
| | schema | schema 作为一种自定义的几何图形，在 G2 中默认提供了 box 和 candle 两种 shape，分别用于绘制箱型图和股票图，注意这两种形状的矩形部分四个点的连接顺序都是顺时针，并且起始点均为左下角，这样就可以无缝转换至极坐标。<img src="https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*USWRQ4MxENAAAAAAAAAAAABkARQnAQ" style="width: 98px;"><img src="https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*NxwVQqQsgHwAAAAAAAAAAABkARQnAQ" style="width: 92px;"> | |
There was a problem hiding this comment.
This image is missing a text alternative. This is a problem for people using screen readers.
|
|
||
| 以柱状图举例，几何标记 interval 会给出四个关键点（即组成矩形的四个顶点），然后将这四个点依次连接，得到每个柱子的形状。**红色圆形**标记就是几何标记点。默认的柱状图就是通过四个几何标记点，依次相连后得到的。 | ||
|
|
||
|  |
There was a problem hiding this comment.
This image is missing a text alternative. This is a problem for people using screen readers.
|
|
||
| 以柱状图举例，几何标记 interval 会给出四个关键点（即组成矩形的四个顶点），然后将这四个点依次连接，得到每个柱子的形状。**红色圆形**标记就是几何标记点。默认的柱状图就是通过四个几何标记点，依次相连后得到的。 | ||
|
|
||
|  |
There was a problem hiding this comment.
This image is missing a text alternative. This is a problem for people using screen readers.
|
|
||
| 下面我们就使用自定义 shape 的功能，把上面的柱状图的柱子变成三角形，即如下图所示： | ||
|
|
||
|  |
There was a problem hiding this comment.
This image is missing a text alternative. This is a problem for people using screen readers.
|
|
||
| 下面我们就使用自定义 shape 的功能，把上面的柱状图的柱子变成三角形，即如下图所示： | ||
|
|
||
|  |
There was a problem hiding this comment.
This image is missing a text alternative. This is a problem for people using screen readers.
|
🎊 PR Preview 79a7dc9 has been successfully built and deployed to https://antvis-G2Plot-preview-pr-3246.surge.sh?type=diff&date=2022-06-08 🕐 Build time: 61.761s
🤖 By Surge Ui Insight |
|
@visiky @ai-qing-hai 这个 PR 还保留吗？ |
|
@hustcc 保留 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.