From d7c09ca185220ea783d3346f485acbee7d7757b8 Mon Sep 17 00:00:00 2001 From: Kasmine <736929286@qq.com> Date: Thu, 7 Jan 2021 09:36:01 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E5=A2=9E=E5=8A=A0=20meta=20options=20?= =?UTF-8?q?=E7=9A=84=E9=85=8D=E7=BD=AE=E8=AF=B4=E6=98=8E=E6=96=87=E6=A1=A3?= =?UTF-8?q?=20&=20radar=20demo=20=E7=A7=BB=E9=99=A4=E6=95=B0=E6=8D=AE?= =?UTF-8?q?=E5=A4=84=E7=90=86=E9=80=BB=E8=BE=91=20(#2182)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * docs(events): 修改事件相关的文档 * docs(meta): 添加 meta 的配置项文档 * docs(api): 调整 api 文档页导航顺序 * docs(meta): 调整 meta options 文档的内容 * docs(faq): 添加双轴图共享 y 轴的 faq 文档 * docs(style): 调整下文档的样式 * docs(demo): 更新 radar demo，移除数据处理 * docs(badge): 添加 open issue & issue resolution 的 badge --- README.md | 2 + README.zh-CN.md | 2 + docs/api/events.en.md | 2 +- docs/api/events.zh.md | 2 +- docs/api/graphic-style.en.md | 2 +- docs/api/graphic-style.zh.md | 2 +- docs/api/interactions.en.md | 2 +- docs/api/interactions.zh.md | 2 +- docs/api/multi-view.en.md | 2 +- docs/api/multi-view.zh.md | 2 +- docs/api/options/meta.en.md | 6 + docs/api/options/meta.zh.md | 179 ++++++++++++++++++ docs/api/theme.en.md | 2 +- docs/api/theme.zh.md | 2 +- docs/common/events.en.md | 59 +----- docs/common/events.zh.md | 51 +++-- docs/common/meta.en.md | 4 +- docs/common/meta.zh.md | 4 +- docs/manual/faq.en.md | 18 ++ docs/manual/faq.zh.md | 18 ++ docs/manual/introduction.en.md | 2 + docs/manual/introduction.zh.md | 2 + .../radar/demo/area-alternate-grid.ts | 14 +- examples/more-plots/radar/demo/area-grid.ts | 14 +- examples/more-plots/radar/demo/area.ts | 14 +- .../radar/demo/line-alternate-grid.ts | 14 +- examples/more-plots/radar/demo/line-grid.ts | 14 +- examples/more-plots/radar/demo/line.ts | 16 +- gatsby-config.js | 12 +- site/pages/index.less | 6 + 30 files changed, 298 insertions(+), 173 deletions(-) create mode 100644 docs/api/options/meta.en.md create mode 100644 docs/api/options/meta.zh.md diff --git a/README.md b/README.md index 612bdad2e1..69716da725 100644 --- a/README.md +++ b/README.md @@ -11,6 +11,8 @@ A charting library based on the Grammar of Graphics. ![Latest commit](https://badgen.net/github/last-commit/antvis/G2Plot) [![build Status](https://github.com/antvis/G2Plot/workflows/build/badge.svg?branch=master)](https://github.com/antvis/G2Plot/actions?query=workflow%3Abuild) [![coverage](https://img.shields.io/coveralls/antvis/G2Plot/master.svg)](https://coveralls.io/github/antvis/G2Plot) +[![Percentage of issues still open](http://isitmaintained.com/badge/open/antvis/g2plot.svg)](http://isitmaintained.com/project/antvis/g2plot "Percentage of issues still open") +[![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/antvis/g2plot.svg)](http://isitmaintained.com/project/antvis/g2plot "Average time to resolve an issue") diff --git a/README.zh-CN.md b/README.zh-CN.md index 60f744c6da..0c745e283a 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -11,6 +11,8 @@ ![Latest commit](https://badgen.net/github/last-commit/antvis/G2Plot) [![build Status](https://github.com/antvis/G2Plot/workflows/build/badge.svg?branch=master)](https://github.com/antvis/G2Plot/actions?query=workflow%3Abuild) [![coverage](https://img.shields.io/coveralls/antvis/G2Plot/master.svg)](https://coveralls.io/github/antvis/G2Plot) +[![Percentage of issues still open](http://isitmaintained.com/badge/open/antvis/g2plot.svg)](http://isitmaintained.com/project/antvis/g2plot "Percentage of issues still open") +[![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/antvis/g2plot.svg)](http://isitmaintained.com/project/antvis/g2plot "Average time to resolve an issue") diff --git a/docs/api/events.en.md b/docs/api/events.en.md index c1c2afec51..77009de96a 100644 --- a/docs/api/events.en.md +++ b/docs/api/events.en.md @@ -1,6 +1,6 @@ --- title: Events -order: 4 +order: 6 --- `markdown:docs/common/events.en.md` \ No newline at end of file diff --git a/docs/api/events.zh.md b/docs/api/events.zh.md index 88d020ec77..27653784c9 100644 --- a/docs/api/events.zh.md +++ b/docs/api/events.zh.md @@ -1,6 +1,6 @@ --- title: 图表事件 -order: 4 +order: 6 --- `markdown:docs/common/events.zh.md` \ No newline at end of file diff --git a/docs/api/graphic-style.en.md b/docs/api/graphic-style.en.md index 0a7dad4f73..3257959d5a 100644 --- a/docs/api/graphic-style.en.md +++ b/docs/api/graphic-style.en.md @@ -1,6 +1,6 @@ --- title: Graphic Style -order: 6 +order: 9 --- G2Plot uses [G](https://github.com/antvis/g) as the drawing engine. Some graphic styles, such as the `lineStyle` of Line, the `columnStyle` of Column, and the style configuration of some components, such as `label.style`, `axis.line.style`, are all transmitted transparently through the drawing properties of G. diff --git a/docs/api/graphic-style.zh.md b/docs/api/graphic-style.zh.md index ad80ff9006..1de7de4d7f 100644 --- a/docs/api/graphic-style.zh.md +++ b/docs/api/graphic-style.zh.md @@ -1,6 +1,6 @@ --- title: 绘图属性 -order: 6 +order: 9 --- G2Plot 使用 [G](https://github.com/antvis/g) 作为绘图引擎，一些图形的样式配置，如折线图的`lineStyle`，柱状图的`columnStyle`等，还有部分组件的样式配置，如`label.style`， `axis.line.style`等，都是直接透传 G 的绘图属性。 diff --git a/docs/api/interactions.en.md b/docs/api/interactions.en.md index 2d61f00b1a..52b2b45040 100644 --- a/docs/api/interactions.en.md +++ b/docs/api/interactions.en.md @@ -1,6 +1,6 @@ --- title: Interactions -order: 4 +order: 7 --- `markdown:docs/common/interactions.en.md` \ No newline at end of file diff --git a/docs/api/interactions.zh.md b/docs/api/interactions.zh.md index 42935b1fdd..89687a642c 100644 --- a/docs/api/interactions.zh.md +++ b/docs/api/interactions.zh.md @@ -1,6 +1,6 @@ --- title: 图表交互 -order: 4 +order: 7 --- `markdown:docs/common/interactions.zh.md` \ No newline at end of file diff --git a/docs/api/multi-view.en.md b/docs/api/multi-view.en.md index 6d49e5945d..7a8d8b59cb 100644 --- a/docs/api/multi-view.en.md +++ b/docs/api/multi-view.en.md @@ -1,6 +1,6 @@ --- title: Multi-View -order: 7 +order: 11 --- `markdown:docs/api/multi-view.zh.md` \ No newline at end of file diff --git a/docs/api/multi-view.zh.md b/docs/api/multi-view.zh.md index e161b820fb..c78a3bf427 100644 --- a/docs/api/multi-view.zh.md +++ b/docs/api/multi-view.zh.md @@ -1,6 +1,6 @@ --- title: 多图层图表 -order: 7 +order: 11 --- 目前处于 `beta` 阶段，详细文档即将到来... \ No newline at end of file diff --git a/docs/api/options/meta.en.md b/docs/api/options/meta.en.md new file mode 100644 index 0000000000..c982d64c88 --- /dev/null +++ b/docs/api/options/meta.en.md @@ -0,0 +1,6 @@ +--- +title: Meta +order: 1 +--- + +`markdown:docs/api/options/meta.zh.md` \ No newline at end of file diff --git a/docs/api/options/meta.zh.md b/docs/api/options/meta.zh.md new file mode 100644 index 0000000000..19831966dc --- /dev/null +++ b/docs/api/options/meta.zh.md @@ -0,0 +1,179 @@ +--- +title: Meta +order: 1 +--- + +通过 `meta` 可以全局化配置图表数据元信息，以字段为单位进行配置。在 `meta` 上的配置将同时影响所有组件的文本信息。 + +## 配置方式 + +传入以字段名为 key，_MetaOption_ 为 value 的配置，同时设置多个字段的元信息。 + +```sign +{ + meta: { + [field: string]: MetaOption + } +} +``` + +Example: + +```ts +{ + meta: { + sale: { + min: 0, + max: 100, + }, + } +} +``` + +## 细分配置项 + +_MetaOption_ 配置如下： + +### MetaOption.type + + _string_ **optional** + +声明度量类型： + +| 度量类型 | 描述 | +| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| 分类度量 | - cat: 分类度量
- timeCat: 时间分类度量 | +| 连续度量 | - linear: 线性度量
- time：连续的时间度量
- log: log 度量
- pow: pow 度量
- quantize：分段度量，用户可以指定不均匀的分段
- quantile: 等分度量，根据数据的分布自动计算分段
| +| 常量度量 | - identity: 常量度量 +### MetaOption.alias + + _string_ **optional** + +数据字段的显示别名，scale 内部不感知，外部注入。 + +### MetaOption.values + + _any[]_ **optional** + +输入域、定义域。 + +### MetaOption.formatter + + _(v: any, k?: number) => any_ **optional** + +tick 格式化函数，会影响数据在坐标轴 axis、图例 legend、tooltip 上的显示。 + +### MetaOption.range + + _[number, number]_ **optional** _default:_ `[0, 1]` + +输出域、值域，表示在绘图范围内可用于绘制的范围。 + +### MetaOption.sync + + _boolean | string_ **optional** + +```ts +{ + meta: { + { + x: { sync: true }, + y: { sync: true }, + x1: { sync: 'x1' }, + x2: { sync: 'x1' }, + } + } +} +``` + +同步 scale。sync: `boolean` 即为 sync: \[key\]，如上例中 `x: { sync: true }` 等同于 `x: { sync: 'x' }`，`y: { sync: true }` 等同于 `y: { sync: 'y' }`，所以，通过以上配置，会分别对 x 和 y 两个字段，x1 和 x2 两个字段进行同步度量操作。 + +### MetaOption.min + + _any_ **optional** + +定义域的最小值，d3 为 domain，ggplot2 为 limits，分类型下无效。 + +### MetaOption.max + + _any_ **optional** + +定义域的最大值，分类型下无效。 + +### MetaOption.minLimit + + _any_ **optional** + +严格模式下的定义域最小值，设置后会强制 ticks 从最小值开始。 + +### MetaOption.maxLimit + + _any_ **optional** + +严格模式下的定义域最大值，设置后会强制 ticks 以最大值结束。 + +### MetaOption.base + + _number_ **optional** + +log 有效，底数。 + +### MetaOption.exponent + + _number_ **optional** + +pow 有效，指数。 + +### MetaOption.nice + + _boolean_ **optional** + +自动调整 min、max 。 + +### MetaOption.ticks + + _any[]_ **optional** + +用于指定 tick，优先级最高。 + +### MetaOption.tickInterval + + _number_ **optional** + +tick 间隔，只对分类型和时间型适用，优先级高于 tickCount。 + +### MetaOption.minTickInterval + + _number_ **optional** + +tick 最小间隔，只对 linear 适用。 + +### MetaOption.tickCount + + _number_ **optional** _default:_ `5` + +tick 个数。 + +### MetaOption.maxTickCount + + _number_ **optional** _default:_ `10` + +ticks 最大值。 + +### MetaOption.tickMethod + + _string | TickMethod_ **optional** + +计算 ticks 的算法。 + +### MetaOption.showLast + + _boolean_ **optional** + +只对 type: 'time' 的 scale 生效，强制显示最后的日期 tick。 + +### MetaOption.mask + + _string_ **optional** + +时间度量 time, timeCat 时有效。底层使用 [fecha](https://github.com/taylorhakes/fecha#formatting-tokens) 进行日期的格式，所以对于 mask 的字符串可以直接参考其写法。 diff --git a/docs/api/theme.en.md b/docs/api/theme.en.md index 573ee5c264..5b5385794a 100644 --- a/docs/api/theme.en.md +++ b/docs/api/theme.en.md @@ -1,6 +1,6 @@ --- title: Theme -order: 5 +order: 8 --- `markdown:docs/common/theme.en.md` \ No newline at end of file diff --git a/docs/api/theme.zh.md b/docs/api/theme.zh.md index f757a45527..ff2e89f6a2 100644 --- a/docs/api/theme.zh.md +++ b/docs/api/theme.zh.md @@ -1,6 +1,6 @@ --- title: 图表主题 -order: 5 +order: 8 --- `markdown:docs/common/theme.zh.md` \ No newline at end of file diff --git a/docs/common/events.en.md b/docs/common/events.en.md index 6938a33a0e..877d1a7e87 100644 --- a/docs/common/events.en.md +++ b/docs/common/events.en.md @@ -1,58 +1 @@ -在 Chart 和 View 上通过 on 绑定事件、off 移除绑定事件。 - -```ts -// 绑定事件 -chart.on('eventName', callback); -// 移除事件 -chart.off('eventName', callback); -``` - -#### eventName - -组成方式：element + ':' + events。 - -element 指要绑定的元素类型，例如 `element`、`legend-item`、`axis-label`、`mask`、`plot`、`legend-item-name`、`reset-button` 等。 - -events 对应 DOM 常见事件，例如 `click`、`mousedown`、`mouseup`、`dblclick`、`mouseenter`、`mouseout`、`mouseover`、`mousemove`、`mouseleave`、`contextmenu` 等，同时支持几个移动端事件：`touchstart`、`touchmove`、`touchend` - -```ts -// plot添加点击事件,整个图表区域 -chart.on('plot:click', (...args) => { - console.log(...args); -}); - -// element 添加点击事件， element 代指 label|point 等 -chart.on('element:click', (...args) => { - console.log(...args); -}); - -// 图例添加点击事件 -chart.on('legend-item:click', (...args) => { - console.log(...args); -}); - -// 图例名称添加点击事件 -chart.on('legend-item-name:click', (...args) => { - console.log(...args); -}); - -// label 添加点击事件 -chart.on('label:click', (...args) => { - console.log(...args); -}); - -// mask 添加点击事件 -chart.on('mask:click', (...args) => { - console.log(...args); -}); - -// axis-label 添加点击事件 -chart.on('axis-label:click', (...args) => { - console.log(...args); -}); - -// 给 annotation 添加点击事件 -chart.on('annotation:click', (...args) => { - console.log(...args); -}); -``` +`markdown:docs/common/events.zh.md` \ No newline at end of file diff --git a/docs/common/events.zh.md b/docs/common/events.zh.md index ac696221ba..70d5ebacaa 100644 --- a/docs/common/events.zh.md +++ b/docs/common/events.zh.md @@ -1,63 +1,58 @@ -在 Chart 和 View 上通过 on 绑定事件、off 移除绑定事件。 +在 Plot 上通过 on 绑定事件、off 移除绑定事件。 ```ts // 绑定事件 -chart.on('eventName', callback); +plot.on('eventName', callback); // 移除事件 -chart.off('eventName', callback); +plot.off('eventName', callback); ``` #### eventName -组成方式：element + ':' + es。 +组成方式：element + ':' + events。 element 指要绑定的元素类型，例如 `element`、`legend-item`、`axis-label`、`mask`、`plot`、`legend-item-name`、`reset-button` 等。 -es 对应 DOM 常见事件，例如 `click`、`mousedown`、`mouseup`、`dblclick`、`mouseenter`、`mouseout`、`mouseover`、`mousemove`、`mouseleave`、`contextmenu` 等，同时支持几个移动端事件：`touchstart`、`touchmove`、`touchend` +events 对应 DOM 常见事件，例如 `click`、`mousedown`、`mouseup`、`dblclick`、`mouseenter`、`mouseout`、`mouseover`、`mousemove`、`mouseleave`、`contextmenu` 等，同时支持几个移动端事件：`touchstart`、`touchmove`、`touchend` ```ts -// plot添加点击事件,整个图表区域 -chart.on('plot:click', (e) => { - console.log(e); +// plot 添加点击事件,整个图表区域 +plot.on('plot:click', (...args) => { + console.log(...args); }); -// element 添加点击事件， element 代指 label|point 等 -chart.on('element:click', (e) => { - console.log(e); +// element 添加点击事件， element 代表图形元素，关于图形元素，请查看：https://g2.antv.vision/zh/docs/manual/concepts/element +plot.on('element:click', (...args) => { + console.log(...args); }); // 图例添加点击事件 -chart.on('legend-item:click', (e) => { - console.log(e); +plot.on('legend-item:click', (...args) => { + console.log(...args); }); // 图例名称添加点击事件 -chart.on('legend-item-name:click', (e) => { - console.log(e); +plot.on('legend-item-name:click', (...args) => { + console.log(...args); }); // label 添加点击事件 -chart.on('label:click', (e) => { - console.log(e); +plot.on('label:click', (...args) => { + console.log(...args); }); // mask 添加点击事件 -chart.on('mask:click', (e) => { - console.log(e); +plot.on('mask:click', (...args) => { + console.log(...args); }); // axis-label 添加点击事件 -chart.on('axis-label:click', (e) => { - console.log(e); +plot.on('axis-label:click', (...args) => { + console.log(...args); }); // 给 annotation 添加点击事件 -chart.on('annotation:click', (e) => { - console.log(e); -}); - -// 给 slider 添加点击事件 -chart.on('slider:valuechanged', (e) => { - console.log(e); +plot.on('annotation:click', (...args) => { + console.log(...args); }); ``` diff --git a/docs/common/meta.en.md b/docs/common/meta.en.md index 0cb4dda18e..685464b8f9 100644 --- a/docs/common/meta.en.md +++ b/docs/common/meta.en.md @@ -2,7 +2,7 @@ **optional** _object_ -Configure the meta of each data field of the chart in global. Configuration of the meta will affect the text content of all components. +Configure the meta of each data field of the chart in global, to define the type and presentation of data. Configuration of the meta will affect the text content of all components. | Attr | Type | Description | | -------------- | ---------- | ------------------------------------------- | @@ -10,3 +10,5 @@ Configure the meta of each data field of the chart in global. Configuration of t | formatter | _function_ | callback function to format all values of the data field | | values | _string[]_ | enumerate all the values of the data field | | range | _number[]_ | mapping range of the data field, default: [0,1] | + +See also the [Meta Options](/en/docs/api/options/meta) to learn more about configuration of `meta`. \ No newline at end of file diff --git a/docs/common/meta.zh.md b/docs/common/meta.zh.md index 4d62c1812c..bd11f0bd5c 100644 --- a/docs/common/meta.zh.md +++ b/docs/common/meta.zh.md @@ -2,7 +2,7 @@ **optional** _object_ -全局化配置图表数据元信息，以字段为单位进行配置。在 meta 上的配置将同时影响所有组件的文本信息。 +全局化配置图表数据元信息，以字段为单位进行配置，来定义数据的类型和展示方式。在 meta 上的配置将同时影响所有组件的文本信息。 | 细分配置项名称 | 类型 | 功能描述 | | -------------- | ---------- | ------------------------------------------- | @@ -10,3 +10,5 @@ | formatter | _function_ | callback 方法，对该字段所有值进行格式化处理 | | values | _string[]_ | 枚举该字段下所有值 | | range | _number[]_ | 字段的数据映射区间，默认为[0,1] | + +关于 `meta` 的更多配置项，请查看 [Meta Options](/zh/docs/api/options/meta) \ No newline at end of file diff --git a/docs/manual/faq.en.md b/docs/manual/faq.en.md index f9bc17aade..d15198ca10 100644 --- a/docs/manual/faq.en.md +++ b/docs/manual/faq.en.md @@ -20,3 +20,21 @@ meta: { } } ``` + +### How to share a Y axis in DaulAxes plot + +You can use `scale.sync` and hide one of the y-axis. + +```ts +// 适用于 DualAxes plot +{ + yFields: ['y1', 'y2'], + meta: { + y1: { sync: 'y2' }, + y2: { sync: true }, + }, + yAxis: { + y2: false + } +} +``` \ No newline at end of file diff --git a/docs/manual/faq.zh.md b/docs/manual/faq.zh.md index c85cfcd6fb..722696342c 100644 --- a/docs/manual/faq.zh.md +++ b/docs/manual/faq.zh.md @@ -20,3 +20,21 @@ meta: { } } ``` + +### 双轴图如何共用一个 Y 轴 + +可以通过开启 scale 同步， 然后隐藏其中一个 y 轴坐标。 + +```ts +// 适用于 DualAxes plot +{ + yFields: ['y1', 'y2'], + meta: { + y1: { sync: 'y2' }, + y2: { sync: true }, + }, + yAxis: { + y2: false + } +} +``` \ No newline at end of file diff --git a/docs/manual/introduction.en.md b/docs/manual/introduction.en.md index 6549307e96..7dba2b50ed 100644 --- a/docs/manual/introduction.en.md +++ b/docs/manual/introduction.en.md @@ -12,6 +12,8 @@ G2Plot is an interactive and responsive charting library based on the grammar of ![Latest commit](https://badgen.net/github/last-commit/antvis/G2Plot) [![build Status](https://github.com/antvis/G2Plot/workflows/build/badge.svg?branch=master)](https://github.com/antvis/G2Plot/actions?query=workflow%3Abuild) [![coverage](https://img.shields.io/coveralls/antvis/G2Plot/master.svg)](https://coveralls.io/github/antvis/G2Plot) +[![Percentage of issues still open](http://isitmaintained.com/badge/open/antvis/g2plot.svg)](http://isitmaintained.com/project/antvis/g2plot "Percentage of issues still open") +[![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/antvis/g2plot.svg)](http://isitmaintained.com/project/antvis/g2plot "Average time to resolve an issue") ## Features diff --git a/docs/manual/introduction.zh.md b/docs/manual/introduction.zh.md index 54e06f3efb..9b32b1d19b 100644 --- a/docs/manual/introduction.zh.md +++ b/docs/manual/introduction.zh.md @@ -12,6 +12,8 @@ G2Plot 是一套简单、易用、并具备一定扩展能力和组合能力的 ![Latest commit](https://badgen.net/github/last-commit/antvis/G2Plot) [![build Status](https://github.com/antvis/G2Plot/workflows/build/badge.svg?branch=master)](https://github.com/antvis/G2Plot/actions?query=workflow%3Abuild) [![coverage](https://img.shields.io/coveralls/antvis/G2Plot/master.svg)](https://coveralls.io/github/antvis/G2Plot) +[![Percentage of issues still open](http://isitmaintained.com/badge/open/antvis/g2plot.svg)](http://isitmaintained.com/project/antvis/g2plot "Percentage of issues still open") +[![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/antvis/g2plot.svg)](http://isitmaintained.com/project/antvis/g2plot "Average time to resolve an issue") ## 特性 diff --git a/examples/more-plots/radar/demo/area-alternate-grid.ts b/examples/more-plots/radar/demo/area-alternate-grid.ts index e88f41a009..4c1612540c 100644 --- a/examples/more-plots/radar/demo/area-alternate-grid.ts +++ b/examples/more-plots/radar/demo/area-alternate-grid.ts @@ -1,20 +1,10 @@ import { Radar } from '@antv/g2plot'; -import { DataSet } from '@antv/data-set'; -fetch('https://gw.alipayobjects.com/os/bmw-prod/bda695a8-cd9f-4b78-a423-3d6d547c10c3.json') +fetch('https://gw.alipayobjects.com/os/antfincdn/svFjSfJkYy/radar.json') .then((data) => data.json()) .then((data) => { - const { DataView } = DataSet; - const dv = new DataView().source(data); - dv.transform({ - type: 'fold', - fields: ['a', 'b'], // 展开字段集 - key: 'user', // key字段 - value: 'score', // value字段 - }); - const radarPlot = new Radar('container', { - data: dv.rows, + data, xField: 'item', yField: 'score', seriesField: 'user', diff --git a/examples/more-plots/radar/demo/area-grid.ts b/examples/more-plots/radar/demo/area-grid.ts index a02bf8b355..3923ce02d5 100644 --- a/examples/more-plots/radar/demo/area-grid.ts +++ b/examples/more-plots/radar/demo/area-grid.ts @@ -1,20 +1,10 @@ import { Radar } from '@antv/g2plot'; -import { DataSet } from '@antv/data-set'; -fetch('https://gw.alipayobjects.com/os/bmw-prod/bda695a8-cd9f-4b78-a423-3d6d547c10c3.json') +fetch('https://gw.alipayobjects.com/os/antfincdn/svFjSfJkYy/radar.json') .then((data) => data.json()) .then((data) => { - const { DataView } = DataSet; - const dv = new DataView().source(data); - dv.transform({ - type: 'fold', - fields: ['a', 'b'], // 展开字段集 - key: 'user', // key字段 - value: 'score', // value字段 - }); - const radarPlot = new Radar('container', { - data: dv.rows, + data, xField: 'item', yField: 'score', seriesField: 'user', diff --git a/examples/more-plots/radar/demo/area.ts b/examples/more-plots/radar/demo/area.ts index 87250df40c..cb7fb79551 100644 --- a/examples/more-plots/radar/demo/area.ts +++ b/examples/more-plots/radar/demo/area.ts @@ -1,20 +1,10 @@ import { Radar } from '@antv/g2plot'; -import { DataSet } from '@antv/data-set'; -fetch('https://gw.alipayobjects.com/os/bmw-prod/bda695a8-cd9f-4b78-a423-3d6d547c10c3.json') +fetch('https://gw.alipayobjects.com/os/antfincdn/svFjSfJkYy/radar.json') .then((data) => data.json()) .then((data) => { - const { DataView } = DataSet; - const dv = new DataView().source(data); - dv.transform({ - type: 'fold', - fields: ['a', 'b'], // 展开字段集 - key: 'user', // key字段 - value: 'score', // value字段 - }); - const radarPlot = new Radar('container', { - data: dv.rows, + data, xField: 'item', yField: 'score', seriesField: 'user', diff --git a/examples/more-plots/radar/demo/line-alternate-grid.ts b/examples/more-plots/radar/demo/line-alternate-grid.ts index 9eb648ade1..e1e0f7644e 100644 --- a/examples/more-plots/radar/demo/line-alternate-grid.ts +++ b/examples/more-plots/radar/demo/line-alternate-grid.ts @@ -1,20 +1,10 @@ import { Radar } from '@antv/g2plot'; -import { DataSet } from '@antv/data-set'; -fetch('https://gw.alipayobjects.com/os/bmw-prod/bda695a8-cd9f-4b78-a423-3d6d547c10c3.json') +fetch('https://gw.alipayobjects.com/os/antfincdn/svFjSfJkYy/radar.json') .then((data) => data.json()) .then((data) => { - const { DataView } = DataSet; - const dv = new DataView().source(data); - dv.transform({ - type: 'fold', - fields: ['a', 'b'], // 展开字段集 - key: 'user', // key字段 - value: 'score', // value字段 - }); - const radarPlot = new Radar('container', { - data: dv.rows, + data, xField: 'item', yField: 'score', seriesField: 'user', diff --git a/examples/more-plots/radar/demo/line-grid.ts b/examples/more-plots/radar/demo/line-grid.ts index 0ed7aaa741..f1814e1d72 100644 --- a/examples/more-plots/radar/demo/line-grid.ts +++ b/examples/more-plots/radar/demo/line-grid.ts @@ -1,20 +1,10 @@ import { Radar } from '@antv/g2plot'; -import { DataSet } from '@antv/data-set'; -fetch('https://gw.alipayobjects.com/os/bmw-prod/bda695a8-cd9f-4b78-a423-3d6d547c10c3.json') +fetch('https://gw.alipayobjects.com/os/antfincdn/svFjSfJkYy/radar.json') .then((data) => data.json()) .then((data) => { - const { DataView } = DataSet; - const dv = new DataView().source(data); - dv.transform({ - type: 'fold', - fields: ['a', 'b'], // 展开字段集 - key: 'user', // key字段 - value: 'score', // value字段 - }); - const radarPlot = new Radar('container', { - data: dv.rows, + data, xField: 'item', yField: 'score', seriesField: 'user', diff --git a/examples/more-plots/radar/demo/line.ts b/examples/more-plots/radar/demo/line.ts index 57f3c33590..aa45f278f4 100644 --- a/examples/more-plots/radar/demo/line.ts +++ b/examples/more-plots/radar/demo/line.ts @@ -1,20 +1,10 @@ -import { DataSet } from '@antv/data-set'; -import { Radar } from '../../../relation/sankey/demo/node_modules/@antv/g2plot'; +import { Radar } from '@antv/g2plot'; -fetch('https://gw.alipayobjects.com/os/bmw-prod/bda695a8-cd9f-4b78-a423-3d6d547c10c3.json') +fetch('https://gw.alipayobjects.com/os/antfincdn/svFjSfJkYy/radar.json') .then((data) => data.json()) .then((data) => { - const { DataView } = DataSet; - const dv = new DataView().source(data); - dv.transform({ - type: 'fold', - fields: ['a', 'b'], // 展开字段集 - key: 'user', // key字段 - value: 'score', // value字段 - }); - const radarPlot = new Radar('container', { - data: dv.rows, + data, xField: 'item', yField: 'score', seriesField: 'user', diff --git a/gatsby-config.js b/gatsby-config.js index 3fb295c803..5132bdaabb 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -58,13 +58,21 @@ module.exports = { }, ], docs: [ + { + slug: 'api/options', + title: { + zh: '通用配置项', + en: 'Common Configuration', + }, + order: 2, + }, { slug: 'api/components', title: { zh: '图表组件', en: 'Components', }, - order: 2, + order: 3, }, { slug: 'api/plots', @@ -72,7 +80,7 @@ module.exports = { zh: '基础图表', en: 'Plots', }, - order: 3, + order: 4, }, ], examples: [ diff --git a/site/pages/index.less b/site/pages/index.less index 6fdd1542d0..4962bf1364 100644 --- a/site/pages/index.less +++ b/site/pages/index.less @@ -53,4 +53,10 @@ code.language-text { [class*="markdown-module--markdown--"] table { margin: 0.5em 0 24px 0 !important; +} + +// 复写 H 边距 +[class*=markdown-module--markdown] h3 { + margin: 1em 0 0.6em; + line-height: 36px; } \ No newline at end of file