diff --git a/docs/api/components/legend.en.md b/docs/api/components/legend.en.md index 770d9978472..a981d3f29d2 100644 --- a/docs/api/components/legend.en.md +++ b/docs/api/components/legend.en.md @@ -1,13 +1,19 @@ --- title: Legend order: 0 +contributors: + [{ author: '新茗', github: 'visiky', avatar: 'https://gw.alipayobjects.com/zos/antfincdn/KAeYPA3TV0/avatar.jpeg' }] --- `markdown:docs/styles/component.md` 🏷️ Legend is an auxiliary component of a plot, which uses color, size, and shape mapping, to show the symbol, color, and name of different series. You can click legends to toggle displaying series in the plot. -🎨 Go to [AntV Design | 图例 Legend](https://www.yuque.com/mo-college/vis-design/hcs9p2) of 墨者学院 to learn more about **Design guide** +🎨 Go to [AntV Design | 图例 Legend](https://www.yuque.com/mo-college/vis-design/hcs9p2) of 墨者学院 to learn more about **Design guide** + +#### Elements + +![](https://gw.alipayobjects.com/zos/antfincdn/COyXvtsGrl/f5bb4c22-f16a-422e-bfee-a9b3d0a5b1b9.png) #### Usage @@ -30,42 +36,42 @@ legend: { -#### Configuration item（_LegendCfg_） - -| Properties | Type | Default | Description | Apply to | -| ------------- | -------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | -| layout | _string_ | horizontal | The layout of the legend is optional:_horizontal \| vertical_ | | -| title | _object_ | - | Legend title configuration is not displayed by default, reference [title configuration](#title) | | -| position | _string_ | - | Legend position, reference  [position configuration](#position) | | -| offsetX | _number_ | - | Legends offset in the x direction. | | -| offsetY | _number_ | - | Legends offset in the y direction. | | -| background | _object_ | - | Background box configuration item.reference  [background configuration](#background) | | -| flipPage | _boolean_ | false | Whether to page when there are too many legend items. | Classification legend | -| pageNavigator | _object_ | - | Configure the style of page navigator。 | Classification legend | -| itemWidth | _number \| null_ | null | The width of the legend item, default to null (automatically computed). | Classification legend | -| itemHeight | _number \| null_ | null | The height of the legend, default to null. | Classification legend | -| itemName | _object_ | - | Configure the legend item name text.reference  [itemName configuration](#itemname) | Classification legend | -| itemValue | _object_ | - | Configuration item of legend item Value added value.reference  [itemValue configuration](#itemvalue)。 | Classification legend | -| itemSpacing | _number_ | - | Controls the horizontal spacing of legend items | Classification legend | -| animate | _boolean_ | - | Whether to turn on the animation switch. | | -| animateOption | _object_ | - | Animate parameter configuration, which takes effect if and only if the animate property is true, that is, the animation is turned on, reference [animateOption configuration](#animateOption) | | -| label | _object_ | - | A configuration item for the text.reference [label configuration](#label) | Classification legend | -| marker | _object_ | - | The configuration of the Marker icon of the legend item. | Classification legend | -| maxWidth | _number_ | - | Legend item maximum width set. | Classification legend | -| maxHeight | _number_ | - | Set the maximum height of the legend item. | Classification legend | -| rail | _object_ | - | The style configuration item for the legend slider (background).reference  [rail configuration](#rail) | Classification legend | -| reversed | _boolean_ | - | Whether to display legend items in reverse order. | Classification legend | -| min | _number_ | - | The minimum value of the range. | Continuous legend | -| max | _number_ | - | Select the maximum value of the range. | Continuous legend | -| value | _number[]_ | - | The selected value. | Continuous legend | -| slidable | _boolean_ | - | Whether the slider can slide. | Continuous legend | -| track | _object_ | - | Select the color block style configuration item for the range.reference  [track  configuration](#track) | Continuous legend | -| handler | _object_ | - | Configuration items for the slider.reference [handler configuration](#handler) | Continuous legend | -| custom | _boolean_ | false | If it is a custom legend, the items property needs to be declared when this property is true. | | -| items | _object[]_ | - | The user configures the content of the legend item himself.reference [items configuration](#items) | | +#### Properties - _LegendCfg_ + +| Properties | Type | Description | Apply to | +| ------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | +| layout | _string_ | The layout of the legend is optional:_horizontal \| vertical_ | | +| title | _object_ | Legend title configuration is not displayed by default, reference [title configuration](#title) | | +| position | _string_ | Legend position, reference  [position configuration](#position) | | +| offsetX | _number_ | Legends offset in the x direction. | | +| offsetY | _number_ | Legends offset in the y direction. | | +| background | _object_ | Background box configuration item.reference  [background configuration](#background) | | +| flipPage | _boolean_ | Whether to page when there are too many legend items. | Classification legend | +| pageNavigator | _object_ | Configure the style of page navigator。 | Classification legend | +| itemWidth | _number \| null_ | The width of the legend item, default to null (automatically computed). | Classification legend | +| itemHeight | _number \| null_ | The height of the legend, default to null. | Classification legend | +| itemName | _object_ | Configure the legend item name text.reference  [itemName configuration](#itemname) | Classification legend | +| itemValue | _object_ | Configuration item of legend item Value added value.reference  [itemValue configuration](#itemvalue)。 | Classification legend | +| itemSpacing | _number_ | Controls the horizontal spacing of legend items | Classification legend | +| label | _object_ | A configuration item for the text.reference [label configuration](#label) | Classification legend | +| marker | _object_ | The configuration of the Marker icon of the legend item. | Classification legend | +| maxWidth | _number_ | Legend item maximum width set. | Classification legend | +| maxHeight | _number_ | Set the maximum height of the legend item. | Classification legend | +| rail | _object_ | The style configuration item for the legend slider (background).reference  [rail configuration](#rail) | Classification legend | +| reversed | _boolean_ | Whether to display legend items in reverse order. | Classification legend | +| custom | _boolean_ | If it is a custom legend, the items property needs to be declared when this property is true. | | +| items | _object[]_ | The user configures the content of the legend item himself.reference [items configuration](#items) | | +| min | _number_ | The minimum value of the range. | Continuous legend | +| max | _number_ | Select the maximum value of the range. | Continuous legend | +| value | _number[]_ | The selected value. | Continuous legend | +| slidable | _boolean_ | Whether the slider can slide. | Continuous legend | +| track | _object_ | Select the color block style configuration item for the range.reference  [track  configuration](#track) | Continuous legend | +| handler | _object_ | Configuration items for the slider.reference [handler configuration](#handler) | Continuous legend | +| animate | _boolean_ | Whether to turn on the animation switch. | | +| animateOption | _object_ | Animate parameter configuration, which takes effect if and only if the animate property is true, that is, the animation is turned on, reference [animateOption configuration](#animateOption) | | -#### Configuration item details +#### Details `markdown:docs/common/legend-cfg.en.md` diff --git a/docs/api/components/legend.zh.md b/docs/api/components/legend.zh.md index d29b080d90f..973e5e7ac72 100644 --- a/docs/api/components/legend.zh.md +++ b/docs/api/components/legend.zh.md @@ -1,13 +1,25 @@ --- title: 图例 - Legend order: 0 +contributors: + [ + { + author: '新茗', + github: 'visiky', + avatar: 'https://gw.alipayobjects.com/zos/antfincdn/KAeYPA3TV0/avatar.jpeg', + }, + ] --- `markdown:docs/styles/component.md` 🏷️ 图例（legend）是图表的辅助元素，使用颜色、大小、形状区分不同的数据类型，用于图表中数据的筛选。 -🎨 前往墨者学院 [AntV 设计 | 图例 Legend](https://www.yuque.com/mo-college/vis-design/hcs9p2) 查看**设计指引**。 +🎨 前往墨者学院 [AntV 设计 | 图例 Legend](https://www.yuque.com/mo-college/vis-design/hcs9p2) 查看**设计指引**。 + +#### 构成元素 + +![](https://gw.alipayobjects.com/zos/antfincdn/COyXvtsGrl/f5bb4c22-f16a-422e-bfee-a9b3d0a5b1b9.png) #### 使用方式 @@ -29,43 +41,43 @@ legend: { } ``` -#### 配置项（_LegendCfg_） - -| 属性 | 类型 | 默认值 | 描述 | 适用于 | -| --- | --- | --- | --- | --- | -| layout | _string_ | horizontal | 图例的布局方式，可选项：_horizontal \| vertical_ | | -| title | _object_ | - | 图例标题配置，默认不展示。详见 [title 配置](#title) | | -| position | _string_ | - | 图例的位置。详见 [position 配置](#position) | | -| offsetX | _number_ | - | 图例 x 方向的偏移。 | | -| offsetY | _number_ | - | 图例 y 方向的偏移。 | | -| background | _object_ | - | 背景框配置项。详见 [background 配置](#background) | | -| flipPage | _boolean_ | false | 当图例项过多时是否进行分页。 | 分类图例 | -| pageNavigator | _object_ | - | 分页器的主题样式设置。 | 分类图例 | -| itemWidth | _number \| null_ | null | 图例项的宽度, 默认为 null（自动计算）。 | 分类图例 | -| itemHeight | _number \| null_ | null | 图例的高度, 默认为 null。 | 分类图例 | -| itemName | _object_ | - | 图例项 name 文本的配置。详见 [itemName 配置](#itemname) | 分类图例 | -| itemValue | _object_ | - | 图例项 value 附加值的配置项。详见 [itemValue 配置](#itemvalue)。 | 分类图例 | -| itemSpacing | _number_ | - | 控制图例项水平方向的间距 | 分类图例 | -| animate | _boolean_ | - | 是否开启动画开关。 | | -| animateOption | _object_ | - | 动画参数配置，当且仅当 animate 属性为 true，即动画开启时生效，详见 [animateOption 配置](#animateOption) | | -| label | _object_ | - | 文本的配置项。详见 [label 配置](#label) | 分类图例 | -| marker | _object_ | - | 图例项的 marker 图标的配置。 | 分类图例 | -| maxWidth | _number_ | - | 图例项最大宽度设置。 | 分类图例 | -| maxHeight | _number_ | - | 图例项最大高度设置。 | 分类图例 | -| rail | _object_ | - | 图例滑轨（背景）的样式配置项。详见 [rail 配置](#rail) | 分类图例 | -| reversed | _boolean_ | - | 是否将图例项逆序展示。 | 分类图例 | -| min | _number_ | - | 范围的最小值。 | 连续图例 | -| max | _number_ | - | 选择范围的最大值。 | 连续图例 | -| value | _number[]_ | - | 选择的值。 | 连续图例 | -| slidable | _boolean_ | - | 滑块是否可以滑动。 | 连续图例 | -| track | _object_ | - | 选择范围的色块样式配置项。详见 [track 配置](#track) | 连续图例 | -| handler | _object_ | - | 滑块的配置项。详见 [handler 配置](#handler) | 连续图例 | -| custom | _boolean_ | false | 是否为自定义图例，当该属性为 true 时，需要声明 items 属性。 | | -| items | _object[]_ | - | 用户自己配置图例项的内容。详见 [items 配置](#items) | | +#### 配置属性 - _LegendCfg_ + +| 属性 | 类型 | 描述 | 适用于 | +| --- | --- |--- | --- | +| layout | _string_ | 图例的布局方式，可选项：_horizontal \| vertical_ | | +| title | _object_ | 图例标题配置，默认不展示。详见 [title 配置](#title) | | +| position | _string_ | 图例的位置。详见 [position 配置](#position) | | +| offsetX | _number_ | 图例 x 方向的偏移。 | | +| offsetY | _number_ | 图例 y 方向的偏移。 | | +| background | _object_ | 背景框配置项。详见 [background 配置](#background) | | +| flipPage | _boolean_ | 当图例项过多时是否进行分页。 | 分类图例 | +| pageNavigator | _object_ | 分页器的主题样式设置。 | 分类图例 | +| itemWidth | _number \| null_ | 图例项的宽度, 默认为 null（自动计算）。 | 分类图例 | +| itemHeight | _number \| null_ | 图例的高度, 默认为 null。 | 分类图例 | +| itemName | _object_ | 图例项 name 文本的配置。详见 [itemName 配置](#itemname) | 分类图例 | +| itemValue | _object_ | 图例项 value 附加值的配置项。详见 [itemValue 配置](#itemvalue)。 | 分类图例 | +| itemSpacing | _number_ | 控制图例项水平方向的间距 | 分类图例 | +| marker | _object_ | 图例项的 marker 图标的配置。 | 分类图例 | +| maxWidth | _number_ | 图例项最大宽度设置。 | 分类图例 | +| maxHeight | _number_ | 图例项最大高度设置。 | 分类图例 | +| reversed | _boolean_ | 是否将图例项逆序展示。 | 分类图例 | +| custom | _boolean_ | 是否为自定义图例，当该属性为 true 时，需要声明 items 属性。 |分类图例 | +| items | _object[]_ | 用户自己配置图例项的内容。详见 [items 配置](#items) | 分类图例 | +| min | _number_ | 范围的最小值。 | 连续图例 | +| max | _number_ | 选择范围的最大值。 | 连续图例 | +| label | _object_ | 文本的配置项。详见 [label 配置](#label) | 连续图例 | +| value | _number[]_ | 选择的值。 | 连续图例 | +| slidable | _boolean_ | 滑块是否可以滑动。 | 连续图例 | +| rail | _object_ | 图例滑轨（背景）的样式配置项。详见 [rail 配置](#rail) | 连续图例 | +| track | _object_ | 选择范围的色块样式配置项。详见 [track 配置](#track) | 连续图例 | +| handler | _object_ | 滑块的配置项。详见 [handler 配置](#handler) | 连续图例 | +| animate | _boolean_ | 是否开启动画开关。 | | +| animateOption | _object_ | 动画参数配置，当且仅当 animate 属性为 true，即动画开启时生效，详见 [animateOption 配置](#animateOption) | | -#### 配置项详解 +#### 详细介绍 `markdown:docs/common/legend-cfg.zh.md` diff --git a/docs/common/axis.en.md b/docs/common/axis.en.md index 1707a7ea496..dc3e4883c6f 100644 --- a/docs/common/axis.en.md +++ b/docs/common/axis.en.md @@ -12,7 +12,7 @@ Configurations related to axis label. Set this to `null` to prevent the axis lab | Properties | Type | | | ------------ | -------------------------------------------------------- | ------- | --------------------------------------------------------- | -| style | _[ShapeAttrs](/zh/docs/api/graphic-style)_ | - | Axis label text graphic property style | +| style | _[ShapeAttrs](/en/docs/api/graphic-style)_ | - | Axis label text graphic property style | | offset | _number_ | - | Axis label offset | | rotate | _number_ | - | Axis label text rotation Angle | | autoRotate | _boolean_ | `true` | Whether to rotate automatically, default true | diff --git a/docs/common/legend-cfg.en.md b/docs/common/legend-cfg.en.md index 1a2188cbeb2..9f2fe3c6328 100644 --- a/docs/common/legend-cfg.en.md +++ b/docs/common/legend-cfg.en.md @@ -2,26 +2,39 @@ **optional** _horizontal | vertical_ -Layout +Layout of legend. + +##### title + +**optional** _G2LegendTitleCfg_ + +Legend title configuration is not displayed by default. _G2LegendTitleCfg_ Configuration is as follows: + +| Properties | Type | Default | Description | +| ---------- | -------- | ------- | ----------------------------------------------------------------------------------- | +| title | _string_ | Content of legend title | +| spacing | _number_ | - | The spacing between the title and the legend item | +| style | _object_ | - | Text style configuration item, refer to [Graphic Style](/zh/docs/api/graphic-style) | ##### position **optional** _string_ -The position of legend is optional: - -- `top` -- `top-left` -- `top-right` -- `right` -- `right-top` -- `right-bottom` -- `left` -- `left-top` -- `left-bottom` -- `bottom` -- `bottom-left` -- `bottom-right` +The position of legend is optional:'top', 'top-left', 'top-right', 'left', 'left-top', 'left-bottom', 'right', 'right-top', 'right-bottom', 'bottom', 'bottom-left', 'bottom-right'。 + + + +##### offsetX + +**optional** _number_ + +Legends offset in the x direction. + +##### offsetY + +**optional** _number_ + +Legends offset in the y direction. ##### background @@ -29,10 +42,10 @@ The position of legend is optional: Background box configuration item. _LegendBackgroundCFG_ is configured as follows: -| Properties | Type | Default | Description | -| ---------- | ------------------ | ------- | ------------------------------------------------------- | -| padding | number \| number[] | - | White space in the background | -| style | object | - | Background style configuration, Reference Graphic Style | +| Properties | Type | Description | +| ---------- | ------------------ | ------------------------------------------------------- | +| padding | _number \| number[]_ | White space in the background | +| style | _ShapeAttr_ | Background style configuration, Reference [Graphic Style](/en/docs/api/graphic-style) | ##### flipPage @@ -46,10 +59,10 @@ Apply to Classification legendClassification legend, configure the style of page navigator, it works when legend is in flipPage. Types of _LegendPageNavigatorCfg_ are as follow: -| Properties | Type | Default | Description | -| ------ | --------------------- | ------ | -------------- | -| marker.style | _PageNavigatorMarkerStyle_ | - | 分页器指示箭头配置项 | -| text.style | _PageNavigatorTextStyle_ | - | The text style of page info. | +| Properties | Type | Description | +| ------ | --------------------- | -------------- | +| marker.style | _PageNavigatorMarkerStyle_ | 分页器指示箭头配置项 | +| text.style | _PageNavigatorTextStyle_ | The text style of page info. | Types of **_PageNavigatorMarkerStyle_** are as follow: @@ -92,17 +105,6 @@ pageNavigator: { }, ``` - -##### handler - -**optional** _ContinueLegendHandlerCfg_ -Apply to Continuous legend, configuration items for slider _ContinueLegendHandlerCfg_ is configured as follows: - -| Properties | Type | Default | Description | -| ---------- | -------- | ------- | --------------------------------------------------------------------------- | -| size | _number_ | - | Slider size | -| style | _object_ | - | Slider configuration, reference [Graphic Style](/zh/docs/api/graphic-style) | - ##### itemHeight **optional** _number_ _default:_ `null` @@ -127,12 +129,6 @@ Apply to Classification legend any;` | -##### itemSpacing - -**optional** _number_ - -Apply to Classification legend, control the horizontal spacing of legend items. - ##### itemValue **optional** _LegendItemValueCfg_ @@ -145,19 +141,13 @@ Apply to Classification legend any;` | -##### animate + -**optional** _boolean_ - -Whether to turn on the animation switch. - -##### animateOption - -**optional** _ComponentAnimateOption_ +##### itemSpacing -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: +**optional** _number_ -`markdown:docs/common/animate-option.en.md` +Apply to Classification legend, control the horizontal spacing of legend items. ##### label @@ -203,50 +193,47 @@ Apply to Classification legendClassification legend, the maximum height of the legend item. -##### offsetX - -**optional** _number_ - -Legends offset in the x direction. +##### reversed -##### offsetY +**optional** _boolean_ +Apply to Classification legend, whether to display legend items in reverse order. -**optional** _number_ +##### custom -Legends offset in the y direction. +**optional** _boolean_ -##### rail +If it is a custom legend, the items property needs to be declared when this property is true. -**optional** _ContinueLegendRailCfg_ -Apply to Classification legend, a style configuration item for the legend slider (background)._ContinueLegendRailCfg_ Configuration is as follows: +##### items -| Properties | Type | Default | Description | -| ------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------ | -| type | _string_ | - | rail type: color and size | -| size | _number_ | - | The width of the slide rail | -| defaultLength | _number_ | - | The default length of the slider. When maxWidth,maxHeight is limited, this property is not used and the length is automatically calculated | -| style | _object_ | - | Slide rail style, refer to [Graphic Style](/zh/docs/api/graphic-style) | +**optional** _LegendItem[]_ +Apply to Classification legend, the user configures the content of the legend item. _LegendItem_ Configuration is as follows: -##### reversed +| Properties | Type | Required | Description | +| ---------- | ----------- | -------- | ------------------------------------ | +| id | _string_ | | Unique value for animation or lookup | +| name | _string_ | required | name | +| value | any | required | value | +| marker | _MarkerCfg_ | | marker | -**optional** _boolean_ -Apply to Classification legend, whether to display legend items in reverse order. +`markdown:docs/common/marker.en.md` ##### slidable **optional** _boolean_ Apply to Continuous legend, whether the slider can slide. -##### title - -**optional** _G2LegendTitleCfg_ +##### rail -Legend title configuration is not displayed by default. _G2LegendTitleCfg_ Configuration is as follows: +**optional** _ContinueLegendRailCfg_ +Apply to Continuous legend, a style configuration item for the legend slider (background)._ContinueLegendRailCfg_ Configuration is as follows: -| Properties | Type | Default | Description | -| ---------- | -------- | ------- | ----------------------------------------------------------------------------------- | -| spacing | _number_ | - | The spacing between the title and the legend item | -| style | _object_ | - | Text style configuration item, refer to [Graphic Style](/zh/docs/api/graphic-style) | +| Properties | Type | Default | Description | +| ------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------ | +| type | _string_ | - | rail type: color and size | +| size | _number_ | - | The width of the slide rail | +| defaultLength | _number_ | - | The default length of the slider. When maxWidth,maxHeight is limited, this property is not used and the length is automatically calculated | +| style | _object_ | - | Slide rail style, refer to [Graphic Style](/zh/docs/api/graphic-style) | ##### track @@ -257,27 +244,32 @@ Apply to Continuous legend, sel | ---------- | -------- | ------- | ------------------------------------------------------------------------------- | | style | _object_ | - | Selected range of styles, reference [Graphic Style](/zh/docs/api/graphic-style) | +##### handler + +**optional** _ContinueLegendHandlerCfg_ +Apply to Continuous legend, configuration items for slider _ContinueLegendHandlerCfg_ is configured as follows: + +| Properties | Type | Default | Description | +| ---------- | -------- | ------- | --------------------------------------------------------------------------- | +| size | _number_ | - | Slider size | +| style | _object_ | - | Slider configuration, reference [Graphic Style](/zh/docs/api/graphic-style) | + ##### values **optional** _number[]_ + Apply to Continuous legend, selected value. -##### custom +##### animate -**optional** _boolean_ +**optional** _boolean_ _default:_ `false` -If it is a custom legend, the items property needs to be declared when this property is true. +Whether to turn on the animation switch. -##### items +##### animateOption -**optional** _LegendItem[]_ -Apply to Classification legend, the user configures the content of the legend item. _LegendItem_ Configuration is as follows: +**optional** _ComponentAnimateOption_ -| Properties | Type | Required | Description | -| ---------- | ----------- | -------- | ------------------------------------ | -| id | _string_ | | Unique value for animation or lookup | -| name | _string_ | required | name | -| value | any | required | value | -| marker | _MarkerCfg_ | | marker | +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: -`markdown:docs/common/marker.en.md` +`markdown:docs/common/animate-option.en.md` diff --git a/docs/common/legend-cfg.zh.md b/docs/common/legend-cfg.zh.md index 155ba1ed104..c21bf64f136 100644 --- a/docs/common/legend-cfg.zh.md +++ b/docs/common/legend-cfg.zh.md @@ -2,26 +2,41 @@ **optional** _horizontal | vertical_ -布局方式 +图例布局方式。提供横向布局和纵向布局。 + +##### title + +**optional** _G2LegendTitleCfg_ + +图例标题配置，默认不展示。_G2LegendTitleCfg_ 配置如下： + +| 参数名 | 类型 | 描述 | +| ------- | -------- | ------------------------------------------------------------ | +| title | _string_ | 文本显示内容 | +| spacing | _number_ | 标题同图例项的间距 | +| style | _object_ | 文本样式配置项，参考  [绘图属性](/zh/docs/api/graphic-style) | ##### position **optional** _string_ -图例的位置，可选项： - -- `top` -- `top-left` -- `top-right` -- `right` -- `right-top` -- `right-bottom` -- `left` -- `left-top` -- `left-bottom` -- `bottom` -- `bottom-left` -- `bottom-right` +图例位置，可选项：'top', 'top-left', 'top-right', 'left', 'left-top', 'left-bottom', 'right', 'right-top', 'right-bottom', 'bottom', 'bottom-left', 'bottom-right'。 + +尝试一下： + + + +##### offsetX + +**optional** _number_ + +图例 x 方向的偏移。 + +##### offsetY + +**optional** _number_ + +图例 y 方向的偏移。 ##### background @@ -29,10 +44,10 @@ 背景框配置项。_LegendBackgroundCfg_ 配置如下： -| 参数名 | 类型 | 默认值 | 描述 | -| ------- | ------------------- | ------ | -------------- | -| padding | number \| number[] | - | 背景的留白 | -| style | object 参考绘图属性 | - | 背景样式配置项 | +| 参数名 | 类型 | 描述 | +| ------- | -------------------- | ---------------------------------------------------------- | +| padding | _number \| number[]_ | 背景的留白 | +| style | _ShapeAttr_ | 背景样式配置项, 参考[绘图属性](/zh/docs/api/graphic-style) | ##### flipPage @@ -44,29 +59,31 @@ **optional** _object_ + + 适用于 分类图例，图例分页导航器的主题样式设置。_LegendPageNavigatorCfg_ 配置如下： -| 参数名 | 类型 | 默认值 | 描述 | -| ------ | --------------------- | ------ | -------------- | -| marker.style | _PageNavigatorMarkerStyle_ | - | 分页器指示箭头 样式配置 | -| text.style | _PageNavigatorTextStyle_ | - | 分页器页面信息 样式配置 | +| 参数名 | 类型 | 默认值 | 描述 | +| ------------ | -------------------------- | ------ | ----------------------- | +| marker.style | _PageNavigatorMarkerStyle_ | - | 分页器指示箭头 样式配置 | +| text.style | _PageNavigatorTextStyle_ | - | 分页器页面信息 样式配置 | **_PageNavigatorMarkerStyle_** 配置如下： -| 参数名 | 类型 | 默认值 | 描述 | -| ------ | --------------------- | ------ | -------------- | -| inactiveFill | _string_ | - | Fill color of arrow marker when unclickable (inactive status). | -| inactiveOpacity | _number_ | - | Fill opacity of arrow marker when unclickable (inactive status). | -| fill | _string_ | - | Default fill color of arrow marker (active status). | -| opacity | _number_ | - | Default fill opacity of arrow marker (active status). | -| size | _number_ | - | Size of arrow marker. | +| 参数名 | 类型 | 默认值 | 描述 | +| --------------- | -------- | ------ | ---------------------------------------------------------------- | +| inactiveFill | _string_ | - | Fill color of arrow marker when unclickable (inactive status). | +| inactiveOpacity | _number_ | - | Fill opacity of arrow marker when unclickable (inactive status). | +| fill | _string_ | - | Default fill color of arrow marker (active status). | +| opacity | _number_ | - | Default fill opacity of arrow marker (active status). | +| size | _number_ | - | Size of arrow marker. | **_PageNavigatorTextStyle_** 配置如下： -| 参数名 | 类型 | 默认值 | 描述 | -| ------ | --------------------- | ------ | -------------- | -| fill | _string_ | - | Font color of page navigator info. | -| fontSize | _number_ | - | Font size of page navigator info. | +| 参数名 | 类型 | 默认值 | 描述 | +| -------- | -------- | ------ | ---------------------------------- | +| fill | _string_ | - | Font color of page navigator info. | +| fontSize | _number_ | - | Font size of page navigator info. | 示例： @@ -92,16 +109,6 @@ pageNavigator: { }, ``` -##### handler - -**optional** _ContinueLegendHandlerCfg_ -适用于 连续图例，滑块的配置项。_ContinueLegendHandlerCfg_ 配置如下： - -| 参数名 | 类型 | 默认值 | 描述 | -| ------ | -------- | ------ | ----------------------------------------------------------- | -| size | _number_ | - | 滑块的大小 | -| style | _object_ | - | 滑块的样式设置，参考 [绘图属性](/zh/docs/api/graphic-style) | - ##### itemHeight **optional** _number_ _default:_ `null` @@ -126,12 +133,6 @@ pageNavigator: { | spacing | _number_ | `false` | 图例项 marker 同后面 name 的间距 | | formatter | _function_ | - | 格式化函数, `(text: string, item: ListItem, index: number) => any;` | -##### itemSpacing - -**optional** _number_ - -适用于 分类图例，控制图例项水平方向的间距。 - ##### itemValue **optional** _LegendItemValueCfg_ @@ -144,19 +145,13 @@ pageNavigator: { | alignRight | _boolean_ | `false` | 是否右对齐，默认为 false，仅当设置图例项宽度时生效 | | formatter | _function_ | - | 格式化函数, `(text: string, item: ListItem, index: number) => any;` | -##### animate - -**optional** _boolean_ + -是否开启动画开关。 - -##### animateOption - -**optional** _ComponentAnimateOption_ +##### itemSpacing -动画参数配置，当且仅当 animate 属性为 true，即动画开启时生效。动画配置详情如下： +**optional** _number_ -`markdown:docs/common/animate-option.zh.md` +适用于 分类图例，控制图例项水平方向的间距。 ##### label @@ -202,50 +197,50 @@ pageNavigator: { 适用于 分类图例，图例项最大高度设置。 -##### offsetX - -**optional** _number_ +##### reversed -图例 x 方向的偏移。 +**optional** _boolean_ -##### offsetY +适用于 分类图例，是否将图例项逆序展示。 -**optional** _number_ +##### custom -图例 y 方向的偏移。 +**optional** _boolean_ -##### rail +是否为自定义图例，当该属性为 true 时，需要声明 items 属性。 -**optional** _ContinueLegendRailCfg_ -适用于 分类图例，图例滑轨（背景）的样式配置项。_ContinueLegendRailCfg_ 配置如下： +##### items -| 参数名 | 类型 | 默认值 | 描述 | -| ------------- | -------- | ------ | -------------------------------------------------------------------------------- | -| type | _string_ | - | rail 的类型，color, size | -| size | _number_ | - | 滑轨的宽度 | -| defaultLength | _number_ | - | 滑轨的默认长度，，当限制了 maxWidth,maxHeight 时，不会使用这个属性会自动计算长度 | -| style | _object_ | - | 滑轨的样式，参考 [绘图属性](/zh/docs/api/graphic-style) | +**optional** _LegendItem[]_ +适用于 分类图例，用户自己配置图例项的内容。_LegendItem_ 配置如下： -##### reversed +| 参数名 | 类型 | 是否必选 | 描述 | +| ------ | ----------- | -------- | ------------------------ | +| id | _string_ | | 唯一值，用于动画或者查找 | +| name | _string_ | required | 名称 | +| value | any | required | 值 | +| marker | _MarkerCfg_ | | 图形标记 | -**optional** _boolean_ -适用于 分类图例，是否将图例项逆序展示。 +`markdown:docs/common/marker.zh.md` ##### slidable **optional** _boolean_ + 适用于 连续图例，滑块是否可以滑动。 -##### title +##### rail -**optional** _G2LegendTitleCfg_ +**optional** _ContinueLegendRailCfg_ -图例标题配置，默认不展示。_G2LegendTitleCfg_ 配置如下： +适用于 连续图例，图例滑轨（背景）的样式配置项。_ContinueLegendRailCfg_ 配置如下： -| 参数名 | 类型 | 默认值 | 描述 | -| ------- | -------- | ------ | ------------------------------------------------------------ | -| spacing | _number_ | - | 标题同图例项的间距 | -| style | _object_ | - | 文本样式配置项，参考  [绘图属性](/zh/docs/api/graphic-style) | +| 参数名 | 类型 | 描述 | +| ------------- | -------- | -------------------------------------------------------------------------------- | +| type | _string_ | rail 的类型，color, size | +| size | _number_ | 滑轨的宽度 | +| defaultLength | _number_ | 滑轨的默认长度，，当限制了 maxWidth,maxHeight 时，不会使用这个属性会自动计算长度 | +| style | _object_ | 滑轨的样式，参考 [绘图属性](/zh/docs/api/graphic-style) | ##### track @@ -256,27 +251,32 @@ pageNavigator: { | ------ | -------- | ------ | ----------------------------------------------------------- | | style | _object_ | - | 选定范围的样式，参考 [绘图属性](/zh/docs/api/graphic-style) | +##### handler + +**optional** _ContinueLegendHandlerCfg_ +适用于 连续图例，滑块的配置项。_ContinueLegendHandlerCfg_ 配置如下： + +| 参数名 | 类型 | 默认值 | 描述 | +| ------ | -------- | ------ | ----------------------------------------------------------- | +| size | _number_ | - | 滑块的大小 | +| style | _object_ | - | 滑块的样式设置，参考 [绘图属性](/zh/docs/api/graphic-style) | + ##### values **optional** _number[]_ + 适用于 连续图例，选择的值。 -##### custom +##### animate -**optional** _boolean_ +**optional** _boolean_ _default:_ `false` -是否为自定义图例，当该属性为 true 时，需要声明 items 属性。 +是否开启动画开关。 -##### items +##### animateOption -**optional** _LegendItem[]_ -适用于 分类图例，用户自己配置图例项的内容。_LegendItem_ 配置如下： +**optional** _ComponentAnimateOption_ -| 参数名 | 类型 | 是否必选 | 描述 | -| ------ | ----------- | -------- | ------------------------ | -| id | _string_ | | 唯一值，用于动画或者查找 | -| name | _string_ | required | 名称 | -| value | any | required | 值 | -| marker | _MarkerCfg_ | | 图形标记 | +动画参数配置，当且仅当 animate 属性为 true，即动画开启时生效。动画配置详情如下： -`markdown:docs/common/marker.zh.md` +`markdown:docs/common/animate-option.zh.md` diff --git a/docs/manual/plots/liquid.en.md b/docs/manual/plots/liquid.en.md index 60c3b058384..467c38e442f 100644 --- a/docs/manual/plots/liquid.en.md +++ b/docs/manual/plots/liquid.en.md @@ -74,6 +74,6 @@ Liquid plot has 5 built-in shapes: `circle | diamond | triangle | pin | rect` In addition to the built-in shapes, the liquid plot also supports custom graphics. At this time, a callback function to build path needs to be passed in. - + \ No newline at end of file diff --git a/docs/manual/plots/liquid.zh.md b/docs/manual/plots/liquid.zh.md index 59b5b662512..dac731cddf6 100644 --- a/docs/manual/plots/liquid.zh.md +++ b/docs/manual/plots/liquid.zh.md @@ -75,6 +75,6 @@ liquidPlot.render(); 水波图除了内置的形状之外，同时也支持自定义图形，这个时候需要传入一个构建 Path 的回调函数。 - + diff --git a/examples/component/annotation/API.en.md b/examples/component/annotation/API.en.md new file mode 100644 index 00000000000..1125397ea32 --- /dev/null +++ b/examples/component/annotation/API.en.md @@ -0,0 +1,5 @@ +--- +title: API +--- + +`markdown:docs/api/components/annotation.en.md` diff --git a/examples/component/annotation/API.zh.md b/examples/component/annotation/API.zh.md new file mode 100644 index 00000000000..3ebf3e13984 --- /dev/null +++ b/examples/component/annotation/API.zh.md @@ -0,0 +1,5 @@ +--- +title: API +--- + +`markdown:docs/api/components/annotation.zh.md` diff --git a/examples/general/annotation/demo/image-annotation.ts b/examples/component/annotation/demo/image-annotation.ts similarity index 100% rename from examples/general/annotation/demo/image-annotation.ts rename to examples/component/annotation/demo/image-annotation.ts diff --git a/examples/general/annotation/demo/line-annotation.ts b/examples/component/annotation/demo/line-annotation.ts similarity index 100% rename from examples/general/annotation/demo/line-annotation.ts rename to examples/component/annotation/demo/line-annotation.ts diff --git a/examples/general/annotation/demo/line-annotation1.ts b/examples/component/annotation/demo/line-annotation1.ts similarity index 100% rename from examples/general/annotation/demo/line-annotation1.ts rename to examples/component/annotation/demo/line-annotation1.ts diff --git a/examples/general/annotation/demo/meta.json b/examples/component/annotation/demo/meta.json similarity index 100% rename from examples/general/annotation/demo/meta.json rename to examples/component/annotation/demo/meta.json diff --git a/examples/general/annotation/demo/region-and-data-marker.ts b/examples/component/annotation/demo/region-and-data-marker.ts similarity index 100% rename from examples/general/annotation/demo/region-and-data-marker.ts rename to examples/component/annotation/demo/region-and-data-marker.ts diff --git a/examples/general/annotation/demo/region-annotation.ts b/examples/component/annotation/demo/region-annotation.ts similarity index 100% rename from examples/general/annotation/demo/region-annotation.ts rename to examples/component/annotation/demo/region-annotation.ts diff --git a/examples/component/annotation/index.en.md b/examples/component/annotation/index.en.md new file mode 100644 index 00000000000..6c83a6cb9c5 --- /dev/null +++ b/examples/component/annotation/index.en.md @@ -0,0 +1,4 @@ +--- +title: Annotations +order: 6 +--- diff --git a/examples/component/annotation/index.zh.md b/examples/component/annotation/index.zh.md new file mode 100644 index 00000000000..fb2a0c829d4 --- /dev/null +++ b/examples/component/annotation/index.zh.md @@ -0,0 +1,4 @@ +--- +title: 图表标注 - Annotations +order: 6 +--- diff --git a/examples/component/legend/API.en.md b/examples/component/legend/API.en.md new file mode 100644 index 00000000000..42585b34c3b --- /dev/null +++ b/examples/component/legend/API.en.md @@ -0,0 +1,5 @@ +--- +title: API +--- + +`markdown:docs/common/legend-cfg.en.md` diff --git a/examples/component/legend/API.zh.md b/examples/component/legend/API.zh.md new file mode 100644 index 00000000000..525daeb349b --- /dev/null +++ b/examples/component/legend/API.zh.md @@ -0,0 +1,5 @@ +--- +title: API +--- + +`markdown:docs/common/legend-cfg.zh.md` diff --git a/examples/component/legend/demo/legend-item-value.ts b/examples/component/legend/demo/legend-item-value.ts new file mode 100644 index 00000000000..1b08328056c --- /dev/null +++ b/examples/component/legend/demo/legend-item-value.ts @@ -0,0 +1,27 @@ +import { Column } from '@antv/g2plot'; + +fetch('https://gw.alipayobjects.com/os/antfincdn/PC3daFYjNw/column-data.json') + .then((data) => data.json()) + .then((data) => { + const plot = new Column('container', { + data, + xField: 'city', + yField: 'value', + seriesField: 'type', + isGroup: 'true', + legend: { + position: 'right-top', + offsetX: 8, + itemValue: { + style: { + opacity: 0.65, + }, + formatter: (text, item) => { + return data.find((d) => d.type === item.value)?.value; + }, + }, + }, + }); + + plot.render(); + }); diff --git a/examples/component/legend/demo/legend-position.jsx b/examples/component/legend/demo/legend-position.jsx new file mode 100644 index 00000000000..e4e8cbeb7be --- /dev/null +++ b/examples/component/legend/demo/legend-position.jsx @@ -0,0 +1,92 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import { Select } from 'antd'; +import { Column } from '@antv/g2plot'; +import insertCss from 'insert-css'; + +class Plot extends React.Component { + chartNodeRef = React.createRef(); + chartRef = React.createRef(); + + componentDidMount() { + fetch('https://gw.alipayobjects.com/os/antfincdn/PC3daFYjNw/column-data.json') + .then((data) => data.json()) + .then((data) => { + const chartDom = this.chartNodeRef.current; + + const plot = new Column(chartDom, { + data, + xField: 'city', + yField: 'value', + seriesField: 'type', + isGroup: 'true', + }); + + plot.render(); + this.chartRef.current = plot; + }); + } + + handlePositionChange = (v) => { + const plot = this.chartRef.current; + if (plot) { + plot.update({ legend: { position: v } }); + } + }; + + render() { + return ( +
+
+ 切换动画 + +
+
+
+ ); + } +} + +// 我们用 insert-css 演示引入自定义样式 +// 推荐将样式添加到自己的样式文件中 +// 若拷贝官方代码，别忘了 npm install insert-css +// 我们用 insert-css 演示引入自定义样式 +// 推荐将样式添加到自己的样式文件中 +// 若拷贝官方代码，别忘了 npm install insert-css +insertCss(` + .select-label { + margin-right: 8px; + } + .select-label:not(:first-of-type) { + margin-left: 8px; + } + .chart-wrapper { + margin-top: 12px; + height: 320px; + } +`); + +ReactDOM.render(, document.getElementById('container')); diff --git a/examples/component/legend/demo/meta.json b/examples/component/legend/demo/meta.json new file mode 100644 index 00000000000..ed65a54048b --- /dev/null +++ b/examples/component/legend/demo/meta.json @@ -0,0 +1,24 @@ +{ + "title": { + "zh": "中文分类", + "en": "Category" + }, + "demos": [ + { + "filename": "legend-position.jsx", + "title": { + "zh": "图例位置", + "en": "Legend position" + }, + "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/FpI3Qcbr11/tooltip.gif" + }, + { + "filename": "legend-item-value.ts", + "title": { + "zh": "展示图例项的数值", + "en": "Display value of legend item" + }, + "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/KL9rDFTlDt/64abafb6-8e4e-48ff-9a79-cb84883a3bef.png" + } + ] +} diff --git a/examples/component/legend/index.en.md b/examples/component/legend/index.en.md new file mode 100644 index 00000000000..ccc812c15ee --- /dev/null +++ b/examples/component/legend/index.en.md @@ -0,0 +1,4 @@ +--- +title: Legend +order: 0 +--- diff --git a/examples/component/legend/index.zh.md b/examples/component/legend/index.zh.md new file mode 100644 index 00000000000..5021c61970a --- /dev/null +++ b/examples/component/legend/index.zh.md @@ -0,0 +1,4 @@ +--- +title: 图例 - Legend +order: 0 +--- diff --git a/examples/general/annotation/API.en.md b/examples/general/annotation/API.en.md deleted file mode 100644 index f874576c33f..00000000000 --- a/examples/general/annotation/API.en.md +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: API ---- - -## Annotation - -图形标注，Annotation，作为图表的辅助元素，主要用于在图表上标识额外的标记注解 - -G2Plot 继承了 G2 的图形标注配置，[详细介绍](https://g2.antv.vision/en/docs/api/general/annotation) - -通用配置属性： - -```ts -{ - /** annotation 类型，支持类型详细见下文介绍 */ - type: 'xxx', - /** 指定 annotation 是否绘制在 canvas 最上层，默认为 false, 即绘制在最下层 */ - top: false, - /** 是否进行动画 */ - animate: true; - /** 动画参数配置，当且仅当 `animate` 属性为 true，即动画开启时生效。 */ - animateOption: {}, - /** Plot Style属性 */ - style: {}, - /** x 方向的偏移量 */ - offsetX: 0, - /** y 方向的偏移量 */ - offsetY: 0, -} -``` - -### Arc Annotaion - -使用示例: - -```javascript -{ - type: 'arc', - /** 起始位置 */ - start: ['20%', 0], - /** 结束位置 */ - end: ['20%', 0], -} -``` - -### Image Annotaion - -使用示例: - -```javascript -{ - type: 'image', - src: - "https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*ELYbTIVCgPoAAAAAAAAAAABkARQnAQ", - /** 位置 */ - position: ["50%", "50%"], - /** Plot Style属性 */ - style: { - width: 100, - height: 100 - }, - /** x 方向的偏移量 */ - offsetX: -50, - /** y 方向的偏移量 */ - offsetY: 50 -} -``` - -### Line Annotaion - -使用示例: _绘制中位线_ - -```javascript -{ - type: 'line', - /** 起始位置 */ - start: ['min','median'], - /** 结束位置 */ - end: ['max','median'], -} -``` - -### Text Annotaion - -使用示例: - -```javascript -{ - type: 'text', - /** 位置 */ - position: ['median', 'median'], - content: '趋势面积图', - style: { - textAlign: 'center', - }, -} -``` - -### Region Annotaion - -使用示例 - -```javascript -{ - type: 'region', - /** 起始位置 */ - start: ['min','median'], - /** 结束位置 */ - end: ['max','median'], -} -``` diff --git a/examples/general/annotation/API.zh.md b/examples/general/annotation/API.zh.md deleted file mode 100644 index c39dd97dda0..00000000000 --- a/examples/general/annotation/API.zh.md +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: API ---- - -## Annotation - -图形标注，Annotation，作为图表的辅助元素，主要用于在图表上标识额外的标记注解 - -G2Plot 继承了 G2 的图形标注配置，[详细介绍](https://g2.antv.vision/en/docs/api/general/annotation) - -通用配置属性： - -```ts -{ - /** annotation 类型，支持类型详细见下文介绍 */ - type: 'xxx', - /** 指定 annotation 是否绘制在 canvas 最上层，默认为 false, 即绘制在最下层 */ - top: false, - /** 是否进行动画 */ - animate: true; - /** 动画参数配置，当且仅当 `animate` 属性为 true，即动画开启时生效。 */ - animateOption: {}, - /** 图形样式属性 */ - style: {}, - /** x 方向的偏移量 */ - offsetX: 0, - /** y 方向的偏移量 */ - offsetY: 0, -} -``` - -### Arc Annotaion - -使用示例: - -```ts -{ - type: 'arc', - /** 起始位置 */ - start: ['20%', 0], - /** 结束位置 */ - end: ['20%', 0], -} -``` - -### Image Annotaion - -使用示例: - -```ts -{ - type: 'image', - src: - "https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*ELYbTIVCgPoAAAAAAAAAAABkARQnAQ", - /** 位置 */ - position: ["50%", "50%"], - /** 图形样式属性 */ - style: { - width: 100, - height: 100 - }, - /** x 方向的偏移量 */ - offsetX: -50, - /** y 方向的偏移量 */ - offsetY: 50 -} -``` - -### Line Annotaion - -使用示例: _绘制中位线_ - -```ts -{ - type: 'line', - /** 起始位置 */ - start: ['min','median'], - /** 结束位置 */ - end: ['max','median'], -} -``` - -### Text Annotaion - -使用示例: - -```ts -{ - type: 'text', - /** 位置 */ - position: ['median', 'median'], - content: '趋势面积图', - style: { - textAlign: 'center', - }, -} -``` - -### Region Annotaion - -使用示例 - -```ts -{ - type: 'region', - /** 起始位置 */ - start: ['min','median'], - /** 结束位置 */ - end: ['max','median'], -} -``` diff --git a/examples/general/annotation/index.en.md b/examples/general/annotation/index.en.md deleted file mode 100644 index a1cd77ea958..00000000000 --- a/examples/general/annotation/index.en.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -title: Annotation Setting -order: 0 ---- diff --git a/examples/general/annotation/index.zh.md b/examples/general/annotation/index.zh.md deleted file mode 100644 index 59710da91c6..00000000000 --- a/examples/general/annotation/index.zh.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -title: 辅助标记（标注）设置 -order: 0 ---- diff --git a/gatsby-config.js b/gatsby-config.js index 8c912a9260a..8759aa2673b 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -239,15 +239,23 @@ module.exports = { slug: 'dynamic-plots', icon: 'other', title: { - zh: '动态交互图', + zh: '动态交互', en: 'Dynamic Plots', }, }, + { + slug: 'component', + icon: 'other', + title: { + zh: '图表组件', + en: 'Components', + }, + }, { slug: 'general', icon: 'other', title: { - zh: '图表通用配置', + zh: '通用配置', en: 'General Configuration', }, },