Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: tiny area pattern #2811

Merged
merged 1 commit into from
Aug 23, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion docs/api/pattern.zh.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,4 +30,5 @@ G2Plot 内置了 `'dot' | 'line' | 'square'` 等若干贴图, 图案颜色默
请注意 pattern 的使用,目前有一些限制:

1. `svg` 的渲染方式下,暂不支持 pattern 图案填充
2. Tooltip, Legend 的 marker 使用的是依旧是纯颜色(plain color). 对于 Legend marker 可以考虑使用回调的方式来设置,参考:[Demo](/zh/examples/plugin/pattern#pie-pattern-callback)
2. pattern 默认继承元素(element)的填充色,但不支持 pattern 填充色为渐变色,即元素(element)为渐变色时,pattern 背景色无法继承,需要手动指定。参考:[Demo](/zh/examples/tiny/tiny-area#pattern)
3. Tooltip, Legend 的 marker 使用的是依旧是纯颜色(plain color). 对于 Legend marker 可以考虑使用回调的方式来设置,参考:[Demo](/zh/examples/plugin/pattern#pie-pattern-callback)
9 changes: 9 additions & 0 deletions examples/tiny/tiny-area/demo/meta.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,15 @@
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*1dr5RKX8gWIAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "pattern.ts",
"title": {
"zh": "带纹理图案的迷你面积图",
"en": "Tiny area plot with pattern"
},
"new": true,
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/DZ4mKJ9Y%240/aeae5577-f5fc-49e1-a4aa-eeb91d76610d.png"
},
{
"filename": "area-annotation.ts",
"title": {
Expand Down
16 changes: 16 additions & 0 deletions examples/tiny/tiny-area/demo/pattern.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { TinyArea } from '@antv/g2plot';

const data = [
264, 417, 438, 887, 309, 397, 550, 575, 563, 430, 525, 592, 492, 467, 513, 546, 983, 340, 539, 243, 226, 192,
];

const tinyArea = new TinyArea('container', {
height: 60,
autoFit: false,
data,
smooth: true,
color: '#E5EDFE',
pattern: { type: 'line', cfg: { stroke: '#5B8FF9' } },
});

tinyArea.render();
4 changes: 2 additions & 2 deletions src/plots/tiny-area/adaptor.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { theme, scale, animation, annotation, tooltip } from '../../adaptor/common';
import { theme, scale, animation, annotation, tooltip, pattern } from '../../adaptor/common';
import { Params } from '../../core/adaptor';
import { flow, deepAssign } from '../../utils';
import { area, line, point } from '../../adaptor/geometries';
Expand Down Expand Up @@ -74,5 +74,5 @@ export function meta(params: Params<TinyAreaOptions>): Params<TinyAreaOptions> {
* @param options
*/
export function adaptor(params: Params<TinyAreaOptions>) {
return flow(geometry, meta, tooltip, theme, animation, annotation())(params);
return flow(pattern('areaStyle'), geometry, meta, tooltip, theme, animation, annotation())(params);
}