diff --git a/CHANGELOG.md b/CHANGELOG.md index 23c92fd5d6..24e0d74fec 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,4 @@ -#### 2.3.28 (2021-07-29) +#### 2.3.28 (2021-07-30) ##### Documentation Changes @@ -8,6 +8,7 @@ ##### New Features * **interaction:** 内置封装 brush 交互 ([#2719](https://github.com/antvis/g2plot/pull/2719)) ([abc45844](https://github.com/antvis/g2plot/commit/abc45844a77fede2f4480e0a026eefddaa9592df)) +* **legend:** 图例支持多行分页 ([36149724](https://github.com/antvis/g2plot/commit/36149724676d8b66ba4f1ef16ae481b64c4981c6)) ##### Bug Fixes diff --git a/docs/common/legend-cfg.en.md b/docs/common/legend-cfg.en.md index e9fd4e49c0..6f3ebbd65d 100644 --- a/docs/common/legend-cfg.en.md +++ b/docs/common/legend-cfg.en.md @@ -53,6 +53,12 @@ Background box configuration item. _LegendBackgroundCFG_ is configured as follow Apply to Classification legend,whether to page when there are too many legend items. (⚠️ 暂不支持多行展示分页) +##### maxRow + + _number_ **optional** + +Apply to Classification legend. You can set the maximum number of rows when legend items is flip-paged, (only applicable to 'layout:' horizontal '),default: 1. + ##### pageNavigator **optional** _object_ @@ -105,6 +111,8 @@ pageNavigator: { }, ``` + + ##### itemHeight **optional** _number_ _default:_ `null` diff --git a/docs/common/legend-cfg.zh.md b/docs/common/legend-cfg.zh.md index 90d8f6b5c7..dc374b2ad0 100644 --- a/docs/common/legend-cfg.zh.md +++ b/docs/common/legend-cfg.zh.md @@ -55,12 +55,16 @@ 适用于 分类图例,当图例项过多时是否进行分页。(⚠️ 暂不支持多行展示分页) +##### maxRow + + _number_ **optional** + +适用于 分类图例,当图例项过多分页时,可以设置最大行数(仅适用于 `layout: 'horizontal'`),默认为:1。 + ##### pageNavigator **optional** _object_ - - 适用于 分类图例,图例分页导航器的主题样式设置。_LegendPageNavigatorCfg_ 配置如下: | 参数名 | 类型 | 默认值 | 描述 | @@ -109,6 +113,8 @@ pageNavigator: { }, ``` + + ##### itemHeight **optional** _number_ _default:_ `null` diff --git a/examples/component/legend/demo/legend-flippage.ts b/examples/component/legend/demo/legend-flippage.ts new file mode 100644 index 0000000000..eef89fe713 --- /dev/null +++ b/examples/component/legend/demo/legend-flippage.ts @@ -0,0 +1,27 @@ +import { Column } from '@antv/g2plot'; + +fetch('https://gw.alipayobjects.com/os/antfincdn/P14mCvkybz/large-datra.json') + .then((data) => data.json()) + .then((data) => { + const plot = new Column('container', { + data, + xField: 'product_box', + yField: 'value', + seriesField: 'province', + isGroup: 'true', + legend: { + flipPage: true, + // 两行分页 + maxRow: 2, + pageNavigator: { + marker: { + style: { + fill: 'rgba(0,0,0,0.65)', + }, + }, + }, + }, + }); + + plot.render(); + }); diff --git a/examples/component/legend/demo/meta.json b/examples/component/legend/demo/meta.json index ba8ebb0e6b..aa2e478e77 100644 --- a/examples/component/legend/demo/meta.json +++ b/examples/component/legend/demo/meta.json @@ -36,6 +36,15 @@ "en": "Default unselected legend tem" }, "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/KL9rDFTlDt/64abafb6-8e4e-48ff-9a79-cb84883a3bef.png" + }, + { + "filename": "legend-flippage.ts", + "title": { + "zh": "图例项分页设置", + "en": "Legend flip-page configuration" + }, + "new": "true", + "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ClED4WyJF%26/2e5cd632-9cc7-4809-b944-469d62bd74b1.png" } ] }