diff --git a/__tests__/bugs/issue-3084-spec.ts b/__tests__/bugs/issue-3084-spec.ts new file mode 100644 index 0000000000..dbf18a94ee --- /dev/null +++ b/__tests__/bugs/issue-3084-spec.ts @@ -0,0 +1,82 @@ +import { DualAxes } from '../../src'; +import { createDiv } from '../utils/dom'; + +const data = [ + { year: '1991', value: 3, count: 10 }, + { year: '1992', value: 4, count: 4 }, + { year: '1993', value: 3.5, count: 5 }, + { year: '1994', value: 5, count: 5 }, + { year: '1995', value: 4.9, count: 4.9 }, + { year: '1996', value: 6, count: 35 }, + { year: '1997', value: 7, count: 7 }, + { year: '1998', value: 9, count: 1 }, + { year: '1999', value: 13, count: 20 }, +]; + +describe('#3084', () => { + it('addAnnotations on view', () => { + const dualAxes = new DualAxes(createDiv(), { + data: [data, data], + xField: 'year', + yField: ['value', 'count'], + geometryOptions: [ + { + geometry: 'line', + color: '#5B8FF9', + }, + { + geometry: 'line', + color: '#5AD8A6', + }, + ], + }); + + dualAxes.render(); + dualAxes.addAnnotations([ + { + type: 'text', + position: ['median', 'median'], + content: '辅助文本', + style: { + fill: 'red', + }, + }, + ]); + expect(dualAxes.chart.getController('annotation').getComponents().length).toBe(1); + expect(dualAxes.chart.views[0].getController('annotation').getComponents().length).toBe(0); + expect(dualAxes.chart.views[1].getController('annotation').getComponents().length).toBe(0); + dualAxes.addAnnotations( + [ + { + type: 'text', + position: ['median', 'median'], + content: '辅助文本', + style: { + fill: 'red', + }, + }, + ], + dualAxes.chart.views[0] + ); + expect(dualAxes.chart.getController('annotation').getComponents().length).toBe(1); + expect(dualAxes.chart.views[0].getController('annotation').getComponents().length).toBe(1); + expect(dualAxes.chart.views[1].getController('annotation').getComponents().length).toBe(0); + dualAxes.addAnnotations( + [ + { + type: 'text', + position: ['median', 'median'], + content: '辅助文本', + style: { + fill: 'red', + }, + }, + ], + dualAxes.chart.views[1] + ); + expect(dualAxes.chart.getController('annotation').getComponents().length).toBe(1); + expect(dualAxes.chart.views[0].getController('annotation').getComponents().length).toBe(1); + expect(dualAxes.chart.views[1].getController('annotation').getComponents().length).toBe(1); + dualAxes.destroy(); + }); +}); diff --git a/docs/api/plot-api.en.md b/docs/api/plot-api.en.md index fd9efac37f..41957fb3c3 100644 --- a/docs/api/plot-api.en.md +++ b/docs/api/plot-api.en.md @@ -120,10 +120,27 @@ Get all status information of the current plot. ### 12. addAnnotations ```sign -plot.addAnnotations(annotations: Annotation[]) => void; +plot.addAnnotations(annotations: Annotation[], view?: View) => void; ``` -批量为当前图表增加图表标注。通过 id 匹配,如果匹配成功,则更新,匹配不成功则增加。 +example: +```ts +dualAxes.addAnnotations( + [ + { + type: 'text', + position: ['median', 'median'], + content: '辅助文本', + style: { + fill: 'red', + }, + }, + ], + dualAxes.chart.views[0] +); +``` + +Add labels to the specified views in batches (default is the current chart). Matching by id, if the match is successful, it will be updated, and if the match is unsuccessful, it will be incremented. diff --git a/docs/api/plot-api.zh.md b/docs/api/plot-api.zh.md index d68c6b45fe..83d7f76fa2 100644 --- a/docs/api/plot-api.zh.md +++ b/docs/api/plot-api.zh.md @@ -122,10 +122,27 @@ plot.getStates(); ### 12. addAnnotations ```sign -plot.addAnnotations(annotations: Annotation[]) => void; +plot.addAnnotations(annotations: Annotation[], view?: View) => void; ``` -批量为当前图表增加图表标注。通过 id 匹配,如果匹配成功,则更新,匹配不成功则增加。 +示例代码: +```ts +dualAxes.addAnnotations( + [ + { + type: 'text', + position: ['median', 'median'], + content: '辅助文本', + style: { + fill: 'red', + }, + }, + ], + dualAxes.chart.views[0] +); +``` + +批量为指定的视图增加标注(默认为当前图表)。通过 id 匹配,如果匹配成功,则更新,匹配不成功则增加。 diff --git a/src/core/plot.ts b/src/core/plot.ts index f2acc6a34c..456dcfca7e 100644 --- a/src/core/plot.ts +++ b/src/core/plot.ts @@ -1,4 +1,4 @@ -import { Chart, Event, Element } from '@antv/g2'; +import { Chart, Event, Element, View } from '@antv/g2'; import { each } from '@antv/util'; import EE from '@antv/event-emitter'; import { bind } from 'size-sensor'; @@ -241,9 +241,10 @@ export abstract class Plot extends EE { /** * 增加图表标注。通过 id 标识,如果匹配到,就做更新 */ - public addAnnotations(annotations: Annotation[]): void { + public addAnnotations(annotations: Annotation[], view?: View): void { + view = view ? view : this.chart; const incoming = [...annotations]; - const controller = this.chart.getController('annotation'); + const controller = view.getController('annotation'); const current = controller.getComponents().map((co) => co.extra); controller.clear(true); @@ -259,7 +260,7 @@ export abstract class Plot extends EE { } incoming.forEach((annotation) => controller.annotation(annotation)); - this.chart.render(true); + view.render(true); } /**