From 15b091a87b37a85b9f92b8d765589cc5773e15e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9F=AF=E5=8D=97?= <31396322+lxfu1@users.noreply.github.com> Date: Mon, 9 Nov 2020 15:36:16 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20api=20=E8=B5=B0=E6=9F=A5=20(#1880)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * docs: api 走查 * fix: conversation --- __tests__/unit/core/index-spec.ts | 8 ++- __tests__/utils/dom.ts | 5 +- docs/manual/plots/scatter.en.md | 50 +++++++++++++++-- docs/manual/plots/scatter.zh.md | 50 +++++++++++++++-- examples/scatter/basic/demo/custom-shape.ts | 61 +++++++++++++++++++++ examples/scatter/basic/demo/meta.json | 8 +++ src/core/plot.ts | 2 +- 7 files changed, 168 insertions(+), 16 deletions(-) create mode 100644 examples/scatter/basic/demo/custom-shape.ts diff --git a/__tests__/unit/core/index-spec.ts b/__tests__/unit/core/index-spec.ts index 3203c6bac62..9a7de8f8fc0 100644 --- a/__tests__/unit/core/index-spec.ts +++ b/__tests__/unit/core/index-spec.ts @@ -177,15 +177,17 @@ describe('core', () => { }); it('getChartSize', () => { - const line = new Line(createDiv(), { + createDiv('', document.body, 'changeSize'); + document.getElementById('changeSize').style.width = '0px'; + const line = new Line('changeSize', { data: partySupport.filter((o) => o.type === 'FF'), xField: 'date', yField: 'value', }); line.render(); - expect(line.chart.height).toBe(300); - + expect(line.chart.width).toBe(400); + expect(line.chart.height).toBe(400); line.destroy(); }); }); diff --git a/__tests__/utils/dom.ts b/__tests__/utils/dom.ts index f611c0a515a..b652acb0752 100644 --- a/__tests__/utils/dom.ts +++ b/__tests__/utils/dom.ts @@ -2,6 +2,7 @@ * 创建一个 div 节点，并放到 container，默认放到 body 上 * @param title * @param container + * @param id 容器 id */ export function createDiv(title: string = '', container: HTMLElement = document.body, id?: string): HTMLElement { const div = document.createElement('div'); @@ -13,10 +14,6 @@ export function createDiv(title: string = '', container: HTMLElement = document. container.appendChild(titleDiv); } - if (id) { - div.setAttribute('id', id); - } - container.appendChild(div); return div; diff --git a/docs/manual/plots/scatter.en.md b/docs/manual/plots/scatter.en.md index b67034899a8..ba2dd7ddc7c 100644 --- a/docs/manual/plots/scatter.en.md +++ b/docs/manual/plots/scatter.en.md @@ -72,9 +72,9 @@ scatterPlot.render(); 点大小映射对应的数据字段名。 -#### size +#### size -**optional** \_number | [number, number] | Function_ +**optional** \_number | [number, number] | Function\_ [**DEMO1**](../../scatter/basic#color-mapping) @@ -106,7 +106,7 @@ scatterPlot.render(); 点形状映射对应的数据字段名。 -#### shape +#### shape **optional** \_string | string[] | Function\_ @@ -139,7 +139,7 @@ scatterPlot.render(); } ``` -#### pointStyle +#### pointStyle **optional** _object_ @@ -192,6 +192,48 @@ scatterPlot.render(); `markdown:docs/common/component.en.md` +#### quadrant + +[**DEMO**](../../scatter/basic#quadrant) + +**optional** _object_ + +四象限组件。 + +| 细分配置 | 类型 | 功能描述 | +| ----------- | -------- | ------------------------------------------ | +| xBaseline | number | x 方向上的象限分割基准线，默认为 0 | +| yBaseline | number | y 方向上的象限分割基准线，默认为 0 | +| lineStyle | object | 配置象限分割线的样式，详细配置参考绘图属性 | +| regionStyle | object[] | 象限样式，详细配置参考绘图属性 | +| labels | object[] | 象限文本配置，详细配置参考绘图属性 | + +#### regressionLine + +[**DEMO**](../../scatter/basic#line) + +**optional** _object_ + +回归线。 + +| 细分配置 | 类型 | 功能描述 | +| --------- | ------------------------------------------------------------------- | ---------------------------------------------------------------- | +| type | string | 回归线类型, exp \| linear \| loess \| log \| poly \| pow \| quad | +| style | object | 配置回归线样式，详细配置参考绘图属性 | +| algorithm | Array<[number, number]> \| ((data: any) => Array<[number, number]>) | 自定义算法，优先级高于 type | + +```ts +regressionLine: { + algorithm: () => { + return [ + [8, 6], + [16, 7], + [24, 7], + ]; + }, +} +``` + ### Event `markdown:docs/common/events.en.md` diff --git a/docs/manual/plots/scatter.zh.md b/docs/manual/plots/scatter.zh.md index e8c9d321436..c45e7e1cf64 100644 --- a/docs/manual/plots/scatter.zh.md +++ b/docs/manual/plots/scatter.zh.md @@ -72,9 +72,9 @@ scatterPlot.render(); 点大小映射对应的数据字段名。 -#### size +#### size -**optional** \_number | [number, number] | Function_ +**optional** \_number | [number, number] | Function\_ [**DEMO1**](../../scatter/basic#color-mapping) @@ -106,7 +106,7 @@ scatterPlot.render(); 点形状映射对应的数据字段名。 -#### shape +#### shape **optional** \_string | string[] | Function\_ @@ -139,7 +139,7 @@ scatterPlot.render(); } ``` -#### pointStyle +#### pointStyle **optional** _object_ @@ -192,6 +192,48 @@ scatterPlot.render(); `markdown:docs/common/component.zh.md` +#### quadrant + +[**DEMO**](../../scatter/basic#quadrant) + +**optional** _object_ + +四象限组件。 + +| 细分配置 | 类型 | 功能描述 | +| ----------- | -------- | ------------------------------------------ | +| xBaseline | number | x 方向上的象限分割基准线，默认为 0 | +| yBaseline | number | y 方向上的象限分割基准线，默认为 0 | +| lineStyle | object | 配置象限分割线的样式，详细配置参考绘图属性 | +| regionStyle | object[] | 象限样式，详细配置参考绘图属性 | +| labels | object[] | 象限文本配置，详细配置参考绘图属性 | + +#### regressionLine + +[**DEMO**](../../scatter/basic#line) + +**optional** _object_ + +回归线。 + +| 细分配置 | 类型 | 功能描述 | +| --------- | ------------------------------------------------------------------- | ---------------------------------------------------------------- | +| type | string | 回归线类型, exp \| linear \| loess \| log \| poly \| pow \| quad | +| style | object | 配置回归线样式，详细配置参考绘图属性 | +| algorithm | Array<[number, number]> \| ((data: any) => Array<[number, number]>) | 自定义算法，优先级高于 type | + +```ts +regressionLine: { + algorithm: () => { + return [ + [8, 6], + [16, 7], + [24, 7], + ]; + }, +} +``` + ### 事件 `markdown:docs/common/events.zh.md` diff --git a/examples/scatter/basic/demo/custom-shape.ts b/examples/scatter/basic/demo/custom-shape.ts new file mode 100644 index 00000000000..5119940f6d1 --- /dev/null +++ b/examples/scatter/basic/demo/custom-shape.ts @@ -0,0 +1,61 @@ +import { Scatter, G2 } from '@antv/g2plot'; + +// 注册主体有 point | interval | polygon | line 等，详细参考 G2: https://g2.antv.vision/ +G2.registerShape('point', 'custom-shape', { + draw(cfg, group) { + const cx = cfg.x; + const cy = cfg.y; + const radius = cfg.size || 5; + const polygon = group.addShape('path', { + attrs: { + path: [['M', cx - radius, cy - radius], ['L', cx + radius, cy - radius], ['L', cx, cy + radius], ['Z']], + ...cfg.defaultStyle, + ...cfg.style, + }, + }); + return polygon; + }, +}); + +fetch('https://gw.alipayobjects.com/os/bmw-prod/3e4db10a-9da1-4b44-80d8-c128f42764a8.json') + .then((res) => res.json()) + .then((data) => { + const scatterPlot = new Scatter('container', { + appendPadding: 30, + data, + xField: 'xG conceded', + yField: 'Shot conceded', + shape: 'custom-shape', + pointStyle: { + lineWidth: 2, + }, + size: 6, + yAxis: { + nice: true, + line: { + style: { + stroke: '#aaa', + }, + }, + }, + tooltip: { + showMarkers: false, + }, + xAxis: { + grid: { + line: { + style: { + stroke: '#eee', + }, + }, + }, + line: { + style: { + stroke: '#aaa', + }, + }, + }, + label: {}, + }); + scatterPlot.render(); + }); diff --git a/examples/scatter/basic/demo/meta.json b/examples/scatter/basic/demo/meta.json index 1209a15acef..680c8bf65ca 100644 --- a/examples/scatter/basic/demo/meta.json +++ b/examples/scatter/basic/demo/meta.json @@ -43,6 +43,14 @@ "en": "Bubble plot yAxis on the right" }, "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*0luHTJODdMUAAAAAAAAAAAAAARQnAQ" + }, + { + "filename": "custom-shape.ts", + "title": { + "zh": "散点图-自定义图形", + "en": "Scatter plot custom shape" + }, + "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*zfwOTZE7KwcAAAAAAAAAAAAAARQnAQ" } ] } diff --git a/src/core/plot.ts b/src/core/plot.ts index 37e144081fc..99677bc9a98 100644 --- a/src/core/plot.ts +++ b/src/core/plot.ts @@ -83,7 +83,7 @@ export abstract class Plot extends EE { */ private getChartSize(width: number, height: number): Size { const chartSize = getContainerSize(this.container); - return { width: width || chartSize.width, height: height || chartSize.height || 300 }; + return { width: width || chartSize.width || 400, height: height || chartSize.height || 400 }; } /**