docs(data): update zh and en for fetch

antvis · Aug 23, 2023 · d5002ff · d5002ff
1 parent 9607f1d
commit d5002ff
Show file tree

Hide file tree

Showing 2 changed files with 99 additions and 7 deletions.
diff --git a/site/docs/spec/data/fetch.en.md b/site/docs/spec/data/fetch.en.md
@@ -3,4 +3,60 @@ title: fetch
 order: 1
 ---
 
-<embed src="@/docs/spec/data/fetch.zh.md"></embed>
+Load data from a `url` specified by the `value` option. G2 will infer the data type from the file extension by default. The format of input data can also be specified by the `format` option.
+
+```js
+// Spec
+chart.options({
+  type: 'point',
+  data: {
+    type: 'fetch',
+    value: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json',
+  },
+});
+```
+
+```js
+// API
+chart.data({
+  type: 'point',
+  data: {
+    type: 'fetch',
+    value: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json',
+  },
+});
+```
+
+## 开始使用
+
+```js | ob
+(() => {
+  const chart = new G2.Chart({ theme: 'classic', padding: 'auto' });
+
+  chart.options({
+    type: 'point',
+    data: {
+      type: 'fetch',
+      value:
+        'https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json',
+    },
+    encode: {
+      x: 'weight',
+      y: 'height',
+      color: 'gender',
+    },
+  });
+
+  return chart.render().then((chart) => chart.getContainer());
+})();
+```
+
+## 选项
+
+| 属性      | 描述                                                  | 类型              | 默认值 |
+| --------- | ----------------------------------------------------- | ----------------- | ------ |
+| value     | requested url                                         | `string`          | `[]`   |
+| format    | data format                                           | `'json' \| 'csv'` | `json` |
+| delimiter | delimiter for parsing for csv data                    | `string`          | `,`    |
+| autoType  | wether infers the types of values for csv data or not | `boolean`         | `true` |
+| transform | data transform for loaded data                        | `DataTransform`   | `[]`   |
diff --git a/site/docs/spec/data/fetch.zh.md b/site/docs/spec/data/fetch.zh.md
@@ -3,18 +3,54 @@ title: fetch
 order: 1
 ---
 
-获取远程的数据。
+根据 `value` 指定的 `url` 获取远程的数据。可以通过 `format` 去指定数据类型，G2 默认会根据 `value` 指定的文件后缀名去推断数据类型。
 
-## 开始使用
+```js
+// Spec
+chart.options({
+  type: 'point',
+  data: {
+    type: 'fetch',
+    value: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json',
+  },
+});
+```
 
 ```js
+// API
 chart.data({
-  type: 'fetch',
-  value: 'https://xxx',
-  format: 'json',
+  type: 'point',
+  data: {
+    type: 'fetch',
+    value: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json',
+  },
 });
 ```
 
+## 开始使用
+
+```js | ob
+(() => {
+  const chart = new G2.Chart({ theme: 'classic', padding: 'auto' });
+
+  chart.options({
+    type: 'point',
+    data: {
+      type: 'fetch',
+      value:
+        'https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json',
+    },
+    encode: {
+      x: 'weight',
+      y: 'height',
+      color: 'gender',
+    },
+  });
+
+  return chart.render().then((chart) => chart.getContainer());
+})();
+```
+
 ## 选项
 
 | 属性      | 描述                                              | 类型              | 默认值 |
@@ -23,4 +59,4 @@ chart.data({
 | format    | 远程文件的数据格式类型，决定用什么方式解析        | `'json' \| 'csv'` | `json` |
 | delimiter | 如果是 csv 文件，解析的时候分割符                 | `string`          | `,`    |
 | autoType  | 如果是 csv 文件，解析的时候是否自动判断列数据类型 | `boolean`         | `true` |
-| transform | 针对装载后的数据进行变换操作                      | `DataTransform`   | `[]`   |
+| transform | 对加载后的数据进行变换操作                        | `DataTransform`   | `[]`   |