1 | import { Adjust } from '@antv/adjust';
|
2 | import { Attribute } from '@antv/attr';
|
3 | import Base from '../base';
|
4 | import { BBox, Coordinate, IGroup, IShape, Scale } from '../dependents';
|
5 | import { AdjustOption, AnimateOption, AttributeOption, ColorAttrCallback, Data, Datum, GeometryLabelCfg, GeometryTooltipOption, LabelCallback, LabelOption, LooseObject, MappingDatum, ScaleOption, ShapeAttrCallback, ShapeFactory, ShapeInfo, ShapeMarkerCfg, ShapeMarkerAttrs, ShapePoint, SizeAttrCallback, StateOption, StyleCallback, StyleOption, TooltipCallback, CustomOption } from '../interface';
|
6 | import Element from './element';
|
7 |
|
8 | export interface InitCfg {
|
9 |
|
10 | coordinate?: Coordinate;
|
11 |
|
12 | data?: Data;
|
13 |
|
14 | theme?: LooseObject;
|
15 |
|
16 | scaleDefs?: Record<string, ScaleOption>;
|
17 |
|
18 | isDataChanged?: boolean;
|
19 | isCoordinateChanged?: boolean;
|
20 | }
|
21 |
|
22 | export interface GeometryCfg {
|
23 |
|
24 | container: IGroup;
|
25 |
|
26 | coordinate?: Coordinate;
|
27 |
|
28 | data?: Data;
|
29 |
|
30 | scales?: Record<string, Scale>;
|
31 |
|
32 | scaleDefs?: Record<string, ScaleOption>;
|
33 |
|
34 | labelsContainer?: IGroup;
|
35 |
|
36 | sortable?: boolean;
|
37 |
|
38 | zIndexReversed?: boolean;
|
39 |
|
40 | sortZIndex?: boolean;
|
41 |
|
42 | useDeferredLabel?: boolean | number;
|
43 |
|
44 | visible?: boolean;
|
45 |
|
46 | theme?: LooseObject;
|
47 |
|
48 | intervalPadding?: number;
|
49 |
|
50 | dodgePadding?: number;
|
51 |
|
52 | maxColumnWidth?: number;
|
53 |
|
54 | minColumnWidth?: number;
|
55 |
|
56 | columnWidthRatio?: number;
|
57 |
|
58 | roseWidthRatio?: number;
|
59 |
|
60 | multiplePieWidthRatio?: number;
|
61 | }
|
62 |
|
63 |
|
64 |
|
65 | export default class Geometry<S extends ShapePoint = ShapePoint> extends Base {
|
66 |
|
67 | readonly type: string;
|
68 |
|
69 | readonly shapeType: string;
|
70 |
|
71 | coordinate: Coordinate;
|
72 |
|
73 | data: Data;
|
74 |
|
75 | readonly container: IGroup;
|
76 |
|
77 | readonly labelsContainer: IGroup;
|
78 |
|
79 | sortable: boolean;
|
80 |
|
81 | theme: LooseObject;
|
82 |
|
83 | scales: Record<string, Scale>;
|
84 |
|
85 | scaleDefs: Record<string, ScaleOption>;
|
86 |
|
87 | canvasRegion: BBox;
|
88 |
|
89 | attributes: Record<string, Attribute>;
|
90 |
|
91 | elements: Element[];
|
92 | |
93 |
|
94 |
|
95 |
|
96 |
|
97 | dataArray: MappingDatum[][];
|
98 |
|
99 | tooltipOption: GeometryTooltipOption | boolean;
|
100 |
|
101 | labelOption: LabelOption | false;
|
102 |
|
103 | stateOption: StateOption;
|
104 |
|
105 | elementsMap: Record<string, Element>;
|
106 |
|
107 | animateOption: AnimateOption | boolean;
|
108 |
|
109 | protected attributeOption: Record<string, AttributeOption>;
|
110 |
|
111 | protected adjustOption: AdjustOption[];
|
112 |
|
113 | protected styleOption: StyleOption;
|
114 |
|
115 | protected customOption: CustomOption;
|
116 |
|
117 | protected shapeFactory: ShapeFactory;
|
118 |
|
119 | protected lastElementsMap: Record<string, Element>;
|
120 |
|
121 | protected generatePoints: boolean;
|
122 |
|
123 | protected beforeMappingData: Data[];
|
124 |
|
125 | protected defaultSize: number;
|
126 | private userTheme;
|
127 | private adjusts;
|
128 | private lastAttributeOption;
|
129 | private idFields;
|
130 | private geometryLabel;
|
131 |
|
132 | protected intervalPadding: number;
|
133 |
|
134 | protected dodgePadding: number;
|
135 |
|
136 | protected maxColumnWidth: number;
|
137 |
|
138 | protected minColumnWidth: number;
|
139 |
|
140 | protected columnWidthRatio: number;
|
141 |
|
142 | protected roseWidthRatio: number;
|
143 |
|
144 | protected multiplePieWidthRatio: number;
|
145 |
|
146 | zIndexReversed?: boolean;
|
147 |
|
148 | sortZIndex?: boolean;
|
149 | protected useDeferredLabel?: null | number;
|
150 |
|
151 | private offscreenGroup;
|
152 | private groupScales;
|
153 | private hasSorted;
|
154 | protected isCoordinateChanged: boolean;
|
155 | |
156 |
|
157 |
|
158 |
|
159 | constructor(cfg: GeometryCfg);
|
160 | /**
|
161 | * 配置 position 通道映射规则。
|
162 | *
|
163 | * @example
|
164 | * ```typescript
|
165 | * // 数据结构: [{ x: 'A', y: 10, color: 'red' }]
|
166 | * geometry.position('x*y');
|
167 | * geometry.position([ 'x', 'y' ]);
|
168 | * geometry.position({
|
169 | * fields: [ 'x', 'y' ],
|
170 | * });
|
171 | * ```
|
172 | *
|
173 | * @param cfg 映射规则
|
174 | * @returns
|
175 | */
|
176 | position(cfg: string | string[] | AttributeOption): Geometry;
|
177 | /**
|
178 | * 配置 color 通道映射规则。
|
179 | *
|
180 | * @example
|
181 | * ```typescript
|
182 | *
|
183 | * geometry.color({
|
184 | * fields: [ 'x' ],
|
185 | * values: [ '#1890ff', '#5AD8A6' ],
|
186 | * });
|
187 | * ```
|
188 | *
|
189 | * @param field 映射规则
|
190 | * @returns
|
191 | */
|
192 | color(field: AttributeOption): Geometry;
|
193 | /**
|
194 | * @example
|
195 | * ```typescript
|
196 | *
|
197 | *
|
198 | *
|
199 | * geometry.color('#1890ff');
|
200 | *
|
201 | *
|
202 | * geometry.color('x');
|
203 | *
|
204 | *
|
205 | * geometry.color('x', [ '#1890ff', '#5AD8A6' ]);
|
206 | *
|
207 | *
|
208 | * geometry.color('x', (xVal) => {
|
209 | * if (xVal === 'a') {
|
210 | * return 'red';
|
211 | * }
|
212 | * return 'blue';
|
213 | * });
|
214 | *
|
215 | *
|
216 | * geometry.color('x', '#BAE7FF-#1890FF-#0050B3');
|
217 | * ```
|
218 | *
|
219 | * @param field 参与颜色映射的数据字段,多个字段使用 '*' 连接符进行连接。
|
220 | * @param cfg Optional, color 映射规则。
|
221 | * @returns
|
222 | */
|
223 | color(field: string, cfg?: string | string[] | ColorAttrCallback): Geometry;
|
224 | /**
|
225 | * 配置 shape 通道映射规则。
|
226 | *
|
227 | * @example
|
228 | *
|
229 | * ```typescript
|
230 | *
|
231 | * geometry.shape({
|
232 | * fields: [ 'x' ],
|
233 | * });
|
234 | * ```
|
235 | *
|
236 | * @param field 映射规则配置。
|
237 | * @returns
|
238 | */
|
239 | shape(field: AttributeOption): Geometry;
|
240 | /**
|
241 | *
|
242 | * @example
|
243 | * ```typescript
|
244 | *
|
245 | *
|
246 | *
|
247 | * geometry.shape('circle');
|
248 | *
|
249 | *
|
250 | * geometry.shape('x');
|
251 | *
|
252 | *
|
253 | * geometry.shape('x', [ 'circle', 'diamond', 'square' ]);
|
254 | *
|
255 | *
|
256 | * geometry.shape('x', (xVal) => {
|
257 | * if (xVal === 'a') {
|
258 | * return 'circle';
|
259 | * }
|
260 | * return 'diamond';
|
261 | * });
|
262 | * ```
|
263 | *
|
264 | * @param field 参与 shape 映射的数据字段,多个字段使用 '*' 连接符进行连接。
|
265 | * @param cfg Optional, shape 映射规则。
|
266 | * @returns
|
267 | */
|
268 | shape(field: string, cfg?: string[] | ShapeAttrCallback): Geometry;
|
269 | /**
|
270 | * 配置 size 通道映射规则。
|
271 | *
|
272 | * @example
|
273 | * ```typescript
|
274 | *
|
275 | * geometry.size({
|
276 | * values: [ 10 ],
|
277 | * })
|
278 | * ```
|
279 | *
|
280 | * @param field 映射规则。
|
281 | * @returns
|
282 | */
|
283 | size(field: AttributeOption): Geometry;
|
284 | /**
|
285 | *
|
286 | * @example
|
287 | * ```typescript
|
288 | *
|
289 | *
|
290 | *
|
291 | * geometry.size(10);
|
292 | *
|
293 | *
|
294 | * geometry.size('x');
|
295 | *
|
296 | *
|
297 | * geometry.size('x', [ 5, 30 ]);
|
298 | *
|
299 | *
|
300 | * geometry.size('x', (xVal) => {
|
301 | * if (xVal === 'a') {
|
302 | * return 10;
|
303 | * }
|
304 | * return 5;
|
305 | * });
|
306 | * ```
|
307 | *
|
308 | * @param field 参与 size 映射的数据字段,多个字段使用 '*' 连接符进行连接。
|
309 | * @param cfg Optional, size 映射规则
|
310 | * @returns
|
311 | */
|
312 | size(field: number | string, cfg?: [number, number] | SizeAttrCallback): Geometry;
|
313 | /**
|
314 | * 设置数据调整方式。G2 目前内置了四种类型:
|
315 | * 1. dodge
|
316 | * 2. stack
|
317 | * 3. symmetric
|
318 | * 4. jitter
|
319 | *
|
320 | *
|
321 | * **Tip**
|
322 | * + 对于 'dodge' 类型,可以额外进行如下属性的配置:
|
323 | * ```typescript
|
324 | * geometry.adjust('dodge', {
|
325 | * marginRatio: 0,
|
326 | * dodgeBy: 'x',
|
327 | * });
|
328 | * ```
|
329 | *
|
330 | * + 对于 'stack' 类型,可以额外进行如下属性的配置:
|
331 | * ```typescript
|
332 | * geometry.adjust('stack', {
|
333 | * reverseOrder: false,
|
334 | * });
|
335 | * ```
|
336 | *
|
337 | * @example
|
338 | * ```typescript
|
339 | * geometry.adjust('stack');
|
340 | *
|
341 | * geometry.adjust({
|
342 | * type: 'stack',
|
343 | * reverseOrder: false,
|
344 | * });
|
345 | *
|
346 | *
|
347 | * geometry.adjust([ 'stack', 'dodge' ]);
|
348 | *
|
349 | * geometry.adjust([
|
350 | * { type: 'stack' },
|
351 | * { type: 'dodge', dodgeBy: 'x' },
|
352 | * ]);
|
353 | * ```
|
354 | *
|
355 | * @param adjustCfg 数据调整配置
|
356 | * @returns
|
357 | */
|
358 | adjust(adjustCfg: string | string[] | AdjustOption | AdjustOption[]): Geometry;
|
359 | /**
|
360 | * 图形样式配置。
|
361 | *
|
362 | * @example
|
363 | * ```typescript
|
364 | *
|
365 | * style({
|
366 | * lineWidth: 2,
|
367 | * stroke: '#1890ff',
|
368 | * });
|
369 | *
|
370 | *
|
371 | * style({
|
372 | * fields: [ 'x', 'y' ],
|
373 | * callback: (xVal, yVal) => {
|
374 | * const style = { lineWidth: 2, stroke: '#1890ff' };
|
375 | * if (xVal === 'a') {
|
376 | * style.lineDash = [ 2, 2 ];
|
377 | * }
|
378 | * return style;
|
379 | * },
|
380 | * });
|
381 | * ```
|
382 | *
|
383 | * @param field 配置样式属性或者样式规则。
|
384 | * @returns
|
385 | */
|
386 | style(field: StyleOption | LooseObject): Geometry;
|
387 | /**
|
388 | * @example
|
389 | * ```typescript
|
390 | * style('x*y', (xVal, yVal) => {
|
391 | * const style = { lineWidth: 2, stroke: '#1890ff' };
|
392 | * if (xVal === 'a') {
|
393 | * style.lineDash = [ 2, 2 ];
|
394 | * }
|
395 | * return style;
|
396 | * });
|
397 | * ```
|
398 | *
|
399 | * @param field 数据字段或者样式配置规则。
|
400 | * @param styleFunc Optional, 样式配置回调函数。
|
401 | * @returns
|
402 | */
|
403 | style(field: string, styleFunc: StyleCallback): Geometry;
|
404 | /**
|
405 | * 配置 Geometry 显示的 tooltip 内容。
|
406 | *
|
407 | * `tooltip(false)` 代表关闭 tooltip。
|
408 | * `tooltip(true)` 代表开启 tooltip。
|
409 | *
|
410 | * Geometry 默认允许 tooltip 展示,我们可以使用以下方法对 tooltip 的展示内容进行配置:
|
411 | *
|
412 | * @example
|
413 | * ```typescript
|
414 | *
|
415 | * tooltip({
|
416 | * fields: [ 'x' ],
|
417 | * });
|
418 | * ```
|
419 | * ![](https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*268uQ50if60AAAAAAAAAAABkARQnAQ)
|
420 | *
|
421 | * ```typescript
|
422 | * tooltip({
|
423 | * fields: [ 'x', 'y' ],
|
424 | * });
|
425 | * ```
|
426 | * ![](https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*A_ujSa8QhtcAAAAAAAAAAABkARQnAQ)
|
427 | *
|
428 | * tooltip() 方法同样支持数据映射及回调用法:
|
429 | *
|
430 | * @example
|
431 | * ```typescript
|
432 | * chart.tooltip({
|
433 | * itemTpl: '<li>{x}: {y}</li>',
|
434 | * });
|
435 | *
|
436 | * chart.line()
|
437 | * .position('x*y')
|
438 | * .tooltip({
|
439 | * fields: [ 'x', 'y' ],
|
440 | * callback: (x, y) => {
|
441 | * return {
|
442 | * x,
|
443 | * y,
|
444 | * };
|
445 | * },
|
446 | * });
|
447 | * ```
|
448 | *
|
449 | * 其返回的值必须为对象,该值中的属性同 chart.tooltip() 的 itemTpl 模板相对应,返回的变量可用于 itemTpl 的字符串模板。
|
450 | *
|
451 | * @param field tooltip 配置信息。
|
452 | * @returns
|
453 | */
|
454 | tooltip(field: GeometryTooltipOption | boolean): Geometry;
|
455 | /**
|
456 | * @example
|
457 | * ```typescript
|
458 | *
|
459 | *
|
460 | *
|
461 | * tooltip('x');
|
462 | *
|
463 | *
|
464 | * tooltip('x*y');
|
465 | *
|
466 | *
|
467 | * tooltip('x*y', (x, y) => {
|
468 | * return {
|
469 | * x,
|
470 | * y,
|
471 | * };
|
472 | * });
|
473 | * ```
|
474 | *
|
475 | * @param field 参与映射的字段。
|
476 | * @param cfg Optional, 回调函数
|
477 | * @returns
|
478 | */
|
479 | tooltip(field: string, cfg?: TooltipCallback): Geometry;
|
480 | /**
|
481 | * Geometry 动画配置。
|
482 | *
|
483 | * + `animate(false)` 关闭动画
|
484 | * + `animate(true)` 开启动画,默认开启。
|
485 | *
|
486 | * 我们将动画分为四个场景:
|
487 | * 1. appear: 图表第一次加载时的入场动画;
|
488 | * 2. enter: 图表绘制完成,发生更新后,产生的新图形的进场动画;
|
489 | * 3. update: 图表绘制完成,数据发生变更后,有状态变更的图形的更新动画;
|
490 | * 4. leave: 图表绘制完成,数据发生变更后,被销毁图形的销毁动画。
|
491 | *
|
492 | * @example
|
493 | * ```typescript
|
494 | * animate({
|
495 | * enter: {
|
496 | * duration: 1000,
|
497 | * },
|
498 | * leave: false,
|
499 | * });
|
500 | * ```
|
501 | *
|
502 | * @param cfg 动画配置
|
503 | * @returns
|
504 | */
|
505 | animate(cfg: AnimateOption | boolean): Geometry;
|
506 | /**
|
507 | * Geometry label 配置。
|
508 | *
|
509 | * @example
|
510 | * ```ts
|
511 | *
|
512 | *
|
513 | * label({
|
514 | * fields: [ 'z' ]
|
515 | * });
|
516 | *
|
517 | * label(false);
|
518 | *
|
519 | *
|
520 | * label('x', {
|
521 | * style: {
|
522 | * fill: 'red',
|
523 | * },
|
524 | * })
|
525 | *
|
526 | *
|
527 | * label('x', (xValue) => {
|
528 | * return {
|
529 | * content: xValue + '%',
|
530 | * };
|
531 | * }, {
|
532 | * type: 'base'
|
533 | * })
|
534 | * ```
|
535 | *
|
536 | * @param field
|
537 | * @returns label
|
538 | */
|
539 | label(field: LabelOption | false | string): Geometry;
|
540 | label(field: string, secondParam: GeometryLabelCfg | LabelCallback): Geometry;
|
541 | label(field: string, secondParam: LabelCallback, thirdParam: GeometryLabelCfg): Geometry;
|
542 | /**
|
543 | * 设置状态对应的样式。
|
544 | *
|
545 | * @example
|
546 | * ```ts
|
547 | * chart.interval().state({
|
548 | * selected: {
|
549 | * animate: { duration: 100, easing: 'easeLinear' },
|
550 | * style: {
|
551 | * lineWidth: 2,
|
552 | * stroke: '#000',
|
553 | * },
|
554 | * },
|
555 | * });
|
556 | * ```
|
557 | *
|
558 | * 如果图形 shape 是由多个 shape 组成,即为一个 G.Group 对象,那么针对 group 中的每个 shape,我们需要使用下列方式进行状态样式设置:
|
559 | * 如果我们为 group 中的每个 shape 设置了 'name' 属性(shape.set('name', 'xx')),则以 'name' 作为 key,否则默认以索引值(即 shape 的 添加顺序)为 key。
|
560 | *
|
561 | * ```ts
|
562 | * chart.interval().shape('groupShape').state({
|
563 | * selected: {
|
564 | * style: {
|
565 | * 0: { lineWidth: 2 },
|
566 | * 1: { fillOpacity: 1 },
|
567 | * }
|
568 | * }
|
569 | * });
|
570 | * ```
|
571 | *
|
572 | * @param cfg 状态样式
|
573 | */
|
574 | state(cfg: StateOption): this;
|
575 | /**
|
576 | * 用于向 shape 中传入自定义的数据。目前可能仅仅可能用于在自定义 shape 的时候,像自定义 shape 中传入自定义的数据,方便实现自定义 shape 的配置能力。
|
577 | *
|
578 | * @example
|
579 | * ```ts
|
580 | * chart.interval().customInfo({ yourData: 'hello, g2!' });
|
581 | * ```
|
582 | *
|
583 | * 然后在自定义 shape 的时候,可以拿到这个信息。
|
584 | *
|
585 | * ```ts
|
586 | * registerShape('interval', 'your-shape', {
|
587 | * draw(shapeInfo, container) {
|
588 | * const { customInfo } = shapeInfo;
|
589 | * console.log(customInfo);
|
590 | * }
|
591 | * });
|
592 | * ```
|
593 | *
|
594 | * @param cfg
|
595 | */
|
596 | customInfo(cfg: any): this;
|
597 | /**
|
598 | * 初始化 Geomtry 实例:
|
599 | * 创建 [[Attribute]] and [[Scale]] 实例,进行数据处理,包括分组、数值化以及数据调整。
|
600 | */
|
601 | init(cfg?: InitCfg): void;
|
602 | /**
|
603 | * Geometry 更新。
|
604 | * @param [cfg] 更新的配置
|
605 | */
|
606 | update(cfg?: InitCfg): void;
|
607 | /**
|
608 | * 将原始数据映射至图形空间,同时创建图形对象。
|
609 | */
|
610 | paint(isUpdate?: boolean): void;
|
611 | /**
|
612 | * 清空当前 Geometry,配置项仍保留,但是内部创建的对象全部清空。
|
613 | * @override
|
614 | */
|
615 | clear(): void;
|
616 | /**
|
617 | * 销毁 Geometry 实例。
|
618 | */
|
619 | destroy(): void;
|
620 | /**
|
621 | * 获取决定分组的图形属性对应的 scale 实例。
|
622 | * @returns
|
623 | */
|
624 | getGroupScales(): Scale[];
|
625 | /**
|
626 | * 根据名字获取图形属性实例。
|
627 | */
|
628 | getAttribute(name: string): Attribute;
|
629 | /** 获取 x 轴对应的 scale 实例。 */
|
630 | getXScale(): Scale;
|
631 | /** 获取 y 轴对应的 scale 实例。 */
|
632 | getYScale(): Scale;
|
633 | /**
|
634 | * 获取决定分组的图形属性实例。
|
635 | */
|
636 | getGroupAttributes(): Attribute[];
|
637 | /** 获取图形属性默认的映射值。 */
|
638 | getDefaultValue(attrName: string): any;
|
639 | /**
|
640 | * 获取该数据发生图形映射后对应的 Attribute 图形空间数据。
|
641 | * @param attr Attribute 图形属性实例。
|
642 | * @param obj 需要进行映射的原始数据。
|
643 | * @returns
|
644 | */
|
645 | getAttributeValues(attr: Attribute, obj: Datum): any[];
|
646 | /**
|
647 | * 获取对应的 adjust 实例
|
648 | * @param adjustType
|
649 | * @returns
|
650 | */
|
651 | getAdjust(adjustType: string): Adjust;
|
652 | /**
|
653 | * 获得 coordinate 实例
|
654 | * @returns
|
655 | */
|
656 | getCoordinate(): Coordinate;
|
657 | getData(): Data;
|
658 | /**
|
659 | * 获取 shape 对应的 marker 样式。
|
660 | * @param shapeName shape 具体名字
|
661 | * @param cfg marker 信息
|
662 | * @returns
|
663 | */
|
664 | getShapeMarker(shapeName: string, cfg: ShapeMarkerCfg): ShapeMarkerAttrs;
|
665 | /**
|
666 | * 根据一定的规则查找 Geometry 的 Elements。
|
667 | *
|
668 | * ```typescript
|
669 | * getElementsBy((element) => {
|
670 | * const data = element.getData();
|
671 | *
|
672 | * return data.a === 'a';
|
673 | * });
|
674 | * ```
|
675 | *
|
676 | * @param condition 定义查找规则的回调函数。
|
677 | * @returns
|
678 | */
|
679 | getElementsBy(condition: (element: Element) => boolean): Element[];
|
680 | /**
|
681 | * 获取 Geometry 的所有 Elements。
|
682 | *
|
683 | * ```typescript
|
684 | * getElements();
|
685 | * ```
|
686 | */
|
687 | getElements(): Element[];
|
688 | /**
|
689 | * 获取数据对应的唯一 id。
|
690 | * @param data Element 对应的绘制数据
|
691 | * @returns
|
692 | */
|
693 | getElementId(data: MappingDatum | MappingDatum[]): any;
|
694 | /**
|
695 | * 获取所有需要创建 scale 的字段名称。
|
696 | */
|
697 | getScaleFields(): string[];
|
698 | /**
|
699 | * 显示或者隐藏 geometry。
|
700 | * @param visible
|
701 | */
|
702 | changeVisible(visible: boolean): void;
|
703 | /**
|
704 | * 获得所有的字段
|
705 | */
|
706 | getFields(): any[];
|
707 | /**
|
708 | * 获取当前配置中的所有分组 & 分类的字段。
|
709 | * @return fields string[]
|
710 | */
|
711 | getGroupFields(): string[];
|
712 | /**
|
713 | * 获得图形的 x y 字段。
|
714 | */
|
715 | getXYFields(): string[];
|
716 | /**
|
717 | * x 字段
|
718 | * @returns
|
719 | */
|
720 | getXField(): string;
|
721 | /**
|
722 | * y 字段
|
723 | * @returns
|
724 | */
|
725 | getYField(): string;
|
726 | /**
|
727 | * 获取该 Geometry 下所有生成的 shapes。
|
728 | * @returns shapes
|
729 | */
|
730 | getShapes(): (IShape | IGroup)[];
|
731 | /**
|
732 | * 获取虚拟 Group。
|
733 | * @returns
|
734 | */
|
735 | getOffscreenGroup(): IGroup;
|
736 | sort(mappingArray: Data[]): void;
|
737 | /**
|
738 | * 调整度量范围。主要针对发生层叠以及一些特殊需求的 Geometry,比如 Interval 下的柱状图 Y 轴默认从 0 开始。
|
739 | */
|
740 | protected adjustScale(): void;
|
741 | /**
|
742 | * 获取当前 Geometry 对应的 Shape 工厂实例。
|
743 | */
|
744 | protected getShapeFactory(): ShapeFactory;
|
745 | /**
|
746 | * 获取每个 Shape 对应的关键点数据。
|
747 | * @param obj 经过分组 -> 数字化 -> adjust 调整后的数据记录
|
748 | * @returns
|
749 | */
|
750 | protected createShapePointsCfg(obj: Datum): S;
|
751 | /**
|
752 | * 创建 Element 实例。
|
753 | * @param mappingDatum Element 对应的绘制数据
|
754 | * @param [isUpdate] 是否处于更新阶段
|
755 | * @returns element 返回创建的 Element 实例
|
756 | */
|
757 | protected createElement(mappingDatum: MappingDatum, index: number, isUpdate?: boolean): Element;
|
758 | /**
|
759 | * 获取每条数据对应的图形绘制数据。
|
760 | * @param mappingDatum 映射后的数据
|
761 | * @returns draw cfg
|
762 | */
|
763 | protected getDrawCfg(mappingDatum: MappingDatum): ShapeInfo;
|
764 | protected updateElements(mappingDataArray: MappingDatum[][], isUpdate?: boolean): void;
|
765 | /**
|
766 | * 获取渲染的 label 类型。
|
767 | */
|
768 | protected getLabelType(): string;
|
769 | /**
|
770 | * 获取 Y 轴上的最小值。
|
771 | */
|
772 | protected getYMinValue(): number;
|
773 | protected createAttrOption(attrName: string, field: AttributeOption | string | number, cfg?: any): void;
|
774 | protected initAttributes(): void;
|
775 | private processData;
|
776 | private adjustData;
|
777 | private groupData;
|
778 | private updateStackRange;
|
779 | private beforeMapping;
|
780 | private generateShapePoints;
|
781 | private normalizeValues;
|
782 | private mapping;
|
783 | private convertPoint;
|
784 | private getStyleCfg;
|
785 | private setCfg;
|
786 | private renderLabels;
|
787 | /**
|
788 | * 是否需要进行群组入场动画
|
789 | * 规则:
|
790 | * 1. 如果发生更新,则不进行
|
791 | * 2. 如果用户关闭 geometry 动画,则不进行
|
792 | * 3. 如果用户关闭了 appear 动画,则不进行
|
793 | * 4. 如果用户配置了 appear.animation,则不进行
|
794 | */
|
795 | private canDoGroupAnimation;
|
796 | }
|
797 |
|
\ | No newline at end of file |