Skip to content

Commit 86633a8

Browse files
visikyvisiky
authored
docs: 文档 & 公告 (#2582)
* refactor: 迁移分面图 demo 到高级图表下 & 增加公告 * docs: 更新公告 & 添加股票图 demo * fix: 修复 merge 冲突 * docs: 增加小提琴图 图表指引文档 & 公告更新 * docs: 增加全局变量设置 & 国际化设置等相关文档 * fix: 修复图例文档错误
1 parent e7e9379 commit 86633a8

30 files changed

+396
-54
lines changed

‎docs/api/options/g2plot.en.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
title: G2Plot
3+
order: 0
4+
---
5+
6+
`markdown:docs/api/options/g2plot.zh.md`

‎docs/api/options/g2plot.zh.md

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
---
2+
title: G2Plot
3+
order: 0
4+
---
5+
6+
全局 G2Plot 对象，在 script 标签引入 g2plot.min.js 文件后获得，或者通过 `import` 或 `require` 进行引用。
7+
8+
### 所有属性
9+
10+
#### setGlobal
11+
12+
<description> _Function_ </description>
13+
14+
```sign
15+
setGlobal(globals: Object): void;
16+
```
17+
18+
设置全局变量。
19+
20+
> 目前支持的全局变量有：
21+
>
22+
> - `locale` 使用的语言，内置 'zh-CN' 和 'en-US'。
23+
24+
**使用示例：**
25+
26+
```ts
27+
// 方式1: 浏览器
28+
<script type="text/javascript" src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.min.js"></script>
29+
<script>
30+
const { setGlobal } = G2Plot;
31+
</script>
32+
33+
// 方式2
34+
import { setGlobal } from '@antv/g2plot';
35+
36+
// 设置全局语言
37+
setGlobal({ locale: 'zh-CN' });
38+
```
39+
40+
#### registerLocale
41+
42+
<description> _Function_ </description>
43+
44+
注册语言包。
45+
46+
```sign
47+
registerLocale(locale: string, localeCfg: Object): void;
48+
```
49+
50+
目前内置 'zh-CN' and 'en-US' 两个语言，你也可以使用 `G2Plot.registerLocale` 方法注册新的语言。语言包格式参考：[src/locales/en_US.ts](https://github.com/antvis/G2Plot/blob/master/src/locales/en_US.ts)
51+
52+
#### G2
53+
54+
获取 G2 对象，相当于引入了 G2 的全部能力。借助 G2 对象，我们可以自定义交互、自定义 Shape、自定义主题等。
55+
56+
**使用示例：**
57+
58+
使用 G2 的自定义注册主题机制，进行主题定制。
59+
60+
<playground path="general/theme/demo/register-theme.ts" rid="register-theme"></playground>

‎docs/api/plots/heatmap.zh.md

-2
Original file line numberDiff line numberDiff line change
@@ -127,8 +127,6 @@ _**CoordinateCfg**_ 坐标系配置项，目前常用于极坐标：
127127

128128
`markdown:docs/common/state-style.en.md`
129129

130-
## 图表组件
131-
132130
### 图表组件
133131

134132
`markdown:docs/common/component.zh.md`

‎docs/common/chart-options.en.md

+7
Original file line numberDiff line numberDiff line change
@@ -45,3 +45,10 @@ Set the pixel ratio of the chart.
4545
<description>**optional** _boolean_</description>
4646

4747
Whether clip the Geometry beyond the coordinate system。
48+
49+
<!-- 先插入到这里 -->
50+
#### locale
51+
52+
<description>**optional** _string_</description>
53+
54+
Specify the locale. There are two built-in locales: 'zh-CN' and 'en-US'. Or you can use `G2Plot.registerLocale` to register a new locale. Go [src/locales/en_US.ts](https://github.com/antvis/G2Plot/blob/master/src/locales/en_US.ts) to see the format.

‎docs/common/chart-options.zh.md

+7
Original file line numberDiff line numberDiff line change
@@ -45,3 +45,10 @@
4545
<description>**optional** _boolean_</description>
4646

4747
是否对超出坐标系范围的 Geometry 进行剪切。
48+
49+
<!-- 先插入到这里 -->
50+
#### locale
51+
52+
<description>**optional** _string_</description>
53+
54+
指定具体语言，目前内置 'zh-CN' and 'en-US' 两个语言，你也可以使用 `G2Plot.registerLocale` 方法注册新的语言。语言包格式参考：[src/locales/en_US.ts](https://github.com/antvis/G2Plot/blob/master/src/locales/en_US.ts)

‎docs/common/legend-cfg.en.md

-14
Original file line numberDiff line numberDiff line change
@@ -287,17 +287,3 @@ _ContinueLegendHandlerCfg_ is configured as follows:
287287
| ---------- | -------- | ------- | --------------------------------------------------------------------------- |
288288
| size | _number_ | - | Slider size, default: 10 |
289289
| style | _object_ | - | Slider configuration, reference [Graphic Style](/zh/docs/api/graphic-style) |
290-
291-
##### animate
292-
293-
<description>**optional** _boolean_ _default:_ `false`</description>
294-
295-
Whether to turn on the animation switch.
296-
297-
##### animateOption
298-
299-
<description>**optional** _ComponentAnimateOption_ </description>
300-
301-
Animation parameter configuration, which takes effect if and only if the animate property is true, that is, when the animation is turned on. Animation configuration details are as follows:
302-
303-
`markdown:docs/common/animate-option.en.md`

‎docs/common/legend-cfg.zh.md

-14
Original file line numberDiff line numberDiff line change
@@ -294,17 +294,3 @@ _ContinueLegendHandlerCfg_ 配置如下：
294294
| ------ | -------- | ------ | ----------------------------------------------------------- |
295295
| size | _number_ | - | 滑块的大小，默认：10 |
296296
| style | _object_ | - | 滑块的样式设置，参考 [绘图属性](/zh/docs/api/graphic-style) |
297-
298-
##### animate
299-
300-
<description>**optional** _boolean_ _default:_ `false`</description>
301-
302-
是否开启动画开关。
303-
304-
##### animateOption
305-
306-
<description>**optional** _ComponentAnimateOption_ </description>
307-
308-
动画参数配置，当且仅当 animate 属性为 true，即动画开启时生效。动画配置详情如下：
309-
310-
`markdown:docs/common/animate-option.zh.md`

‎docs/manual/plots/facet.en.md

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
---
2+
title: Facet
3+
order: 24
4+
contributors:
5+
[{ author: '新茗', github: 'visiky', avatar: 'https://gw.alipayobjects.com/zos/antfincdn/KAeYPA3TV0/avatar.jpeg' }]
6+
---
7+
8+
<!-- ### 用法建议 -->
9+
## Introduction
10+
11+
分面（Facet）是指利用 G2 提供的 View 递归嵌套能力，将一份数据按照某个维度分隔成若干子集，然后创建一个图表的集合，将每一个数据子集绘制到图表矩阵的窗格中。
12+
13+
分面主要提供了两个功能：
14+
15+
1. 按照指定的维度划分数据集；
16+
2. 对图表进行排版和布局。
17+
18+
对于探索型数据分析来说，分面是一个强大有力的工具，能帮我们快速地分析出数据各个子集模式的异同。目前 G2 内置的分面包括六种：rect、list、circle、tree、mirror 和 matrix，具体描述如下表所示：
19+
20+
| **分面类型** | **说明** |
21+
| :----------: | :---------------------------------------------------: |
22+
| rect | **默认类型**，指定 2 个维度作为行列，形成图表的矩阵。 |
23+
| list | 指定一个维度，可以指定一行有几列，超出自动换行。 |
24+
| circle | 指定一个维度，沿着圆分布。 |
25+
| tree | 指定多个维度，每个维度作为树的一级，展开多层图表。 |
26+
| mirror | 指定一个维度，形成镜像图表。 |
27+
| matrix | 指定一个维度，形成矩阵分面。 |
28+
29+
## Qucik start
30+
31+
<div class='sign'>
32+
33+
```ts
34+
import { Facet } from '@antv/g2plot';
35+
36+
fetch('https://gw.alipayobjects.com/os/antfincdn/VnrXpYSuqW/circle-pie.json')
37+
.then((res) => res.json())
38+
.then((data) => {
39+
const plot = new Facet('container', {
40+
type: 'circle',
41+
fields: ['clarity'],
42+
data,
43+
tooltip: { showMarkers: false },
44+
meta: {
45+
cut: {
46+
sync: true,
47+
},
48+
},
49+
eachView: (view, f) => {
50+
return {
51+
type: 'pie',
52+
options: {
53+
data: f.data,
54+
angleField: 'mean',
55+
colorField: 'cut',
56+
pieStyle: { stroke: null },
57+
},
58+
};
59+
},
60+
});
61+
plot.render();
62+
});
63+
64+
```
65+
66+
</div>
67+
68+
📊 See more <a href="/en/examples/plugin/facet#column" target='blank'>examples</a>.
69+
70+
🎨 For an overview of the gauge plot options see the [API reference](/en/docs/api/advanced-plots/facet).
71+
72+
</div>

‎docs/manual/plots/facet.zh.md

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
---
2+
title: 分面图
3+
order: 24
4+
contributors:
5+
[{ author: '新茗', github: 'visiky', avatar: 'https://gw.alipayobjects.com/zos/antfincdn/KAeYPA3TV0/avatar.jpeg' }]
6+
---
7+
8+
<!-- ### 用法建议 -->
9+
## 介绍
10+
11+
分面（Facet）是指利用 G2 提供的 View 递归嵌套能力，将一份数据按照某个维度分隔成若干子集，然后创建一个图表的集合，将每一个数据子集绘制到图表矩阵的窗格中。
12+
13+
分面主要提供了两个功能：
14+
15+
1. 按照指定的维度划分数据集；
16+
2. 对图表进行排版和布局。
17+
18+
对于探索型数据分析来说，分面是一个强大有力的工具，能帮我们快速地分析出数据各个子集模式的异同。目前 G2 内置的分面包括六种：rect、list、circle、tree、mirror 和 matrix，具体描述如下表所示：
19+
20+
| **分面类型** | **说明** |
21+
| :----------: | :---------------------------------------------------: |
22+
| rect | **默认类型**，指定 2 个维度作为行列，形成图表的矩阵。 |
23+
| list | 指定一个维度，可以指定一行有几列，超出自动换行。 |
24+
| circle | 指定一个维度，沿着圆分布。 |
25+
| tree | 指定多个维度，每个维度作为树的一级，展开多层图表。 |
26+
| mirror | 指定一个维度，形成镜像图表。 |
27+
| matrix | 指定一个维度，形成矩阵分面。 |
28+
29+
## 快速开始
30+
31+
<div class='sign'>
32+
33+
```ts
34+
import { Facet } from '@antv/g2plot';
35+
36+
fetch('https://gw.alipayobjects.com/os/antfincdn/VnrXpYSuqW/circle-pie.json')
37+
.then((res) => res.json())
38+
.then((data) => {
39+
const plot = new Facet('container', {
40+
type: 'circle',
41+
fields: ['clarity'],
42+
data,
43+
tooltip: { showMarkers: false },
44+
meta: {
45+
cut: {
46+
sync: true,
47+
},
48+
},
49+
eachView: (view, f) => {
50+
return {
51+
type: 'pie',
52+
options: {
53+
data: f.data,
54+
angleField: 'mean',
55+
colorField: 'cut',
56+
pieStyle: { stroke: null },
57+
},
58+
};
59+
},
60+
});
61+
plot.render();
62+
});
63+
64+
```
65+
66+
</div>
67+
68+
📊 查看更多<a href="/zh/examples/plugin/facet#column" target='blank'>示例</a>.
69+
70+
🎨 柱状图详细的配置参考 [API 文档](/zh/docs/api/advanced-plots/facet).
71+
72+
</div>

‎docs/manual/plots/violin.en.md

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
title: Violin
3+
order: 21
4+
contributors:
5+
[{ author: '新茗', github: 'visiky', avatar: 'https://gw.alipayobjects.com/zos/antfincdn/KAeYPA3TV0/avatar.jpeg' }]
6+
---
7+
8+
`markdown:docs/manual/plots/violin.zh.md`

‎docs/manual/plots/violin.zh.md

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
---
2+
title: 小提琴图
3+
order: 21
4+
contributors:
5+
[{ author: '新茗', github: 'visiky', avatar: 'https://gw.alipayobjects.com/zos/antfincdn/KAeYPA3TV0/avatar.jpeg' }]
6+
---
7+
8+
<div class="manual-docs">
9+
10+
<div data-card-type="block" data-lake-card="table" id="pLwYV" class="">
11+
<table class="lake-table" style="width: 100%; outline: none; border-collapse: collapse;">
12+
<colgroup>
13+
<col width="425" span="1">
14+
<col width="340" span="1">
15+
</colgroup>
16+
<tbody>
17+
<tr style="height: 33px;">
18+
<td colspan="1" rowspan="4" style="background:#fff">
19+
<playground path="more-plots/violin/demo/basic.ts" rid="violin-basic"></playground>
20+
</td>
21+
<td class="style1">
22+
<p><strong>定义</strong></p>
23+
<p><span class="lake-fontsize-12">小提琴图 (Violin Plot) 用于显示数据分布及其概率密度。
24+
</span></p>
25+
<p><span class="lake-fontsize-12">这种图表结合了箱形图和密度图的特征，主要用来显示数据的分布形状。中间的黑色粗条表示四分位数范围，从其延伸的幼细黑线代表 95% 置信区间，而白点则为中位数。</span></p>
26+
</td>
27+
</tr>
28+
<tr style="height: 33px;">
29+
<td colspan="1">
30+
<p><strong>数据准备</strong></p>
31+
<p><span class="lake-fontsize-12">1 或 2 个分类字段</span></p>
32+
<p><span class="lake-fontsize-12">1 个数值字段</span></p>
33+
</td>
34+
</tr>
35+
</tbody>
36+
</table>
37+
</div>
38+
39+
## 快速开始
40+
41+
<div class='sign'>
42+
43+
```ts
44+
import { Violin } from '@antv/g2plot';
45+
46+
fetch('https://gw.alipayobjects.com/os/bmw-prod/6b0a5f1d-5931-42ae-b3ba-3c3cb77d0861.json')
47+
.then((response) => response.json())
48+
.then((data) => {
49+
const violinPlot = new Violin('container', {
50+
height: 500,
51+
data: data,
52+
xField: 'x',
53+
yField: 'y',
54+
});
55+
violinPlot.render();
56+
});
57+
```
58+
59+
</div>
60+
61+
📊 See more <a href="/zh/examples/more-plots/violin" target='blank'>examples</a>.
62+
63+
🎨 For an overview of the violin plot options see the [API reference](/zh/docs/api/plots/violin).
64+
65+
</div>
66+
67+
## 图表特性
68+
69+
### 设置小提琴图形状
70+
71+
<playground path="more-plots/violin/demo/shape.ts" rid="violin-shape"></playground>

0 commit comments

Comments
 (0)