React 차트 데이터 주석
React 차트에서 데이터 주석 레이어를 사용하면 데이터 차트로 플롯된 데이터에 경사선, 수직/수평선(축 슬라이스), 수직/수평 스트립(특정 축 대상), 직사각형 및 평행 사변형(밴드라고도 함)으로 주석을 달 수 있습니다. 데이터 바인딩이 지원되므로 차트를 원하는 만큼 주석을 만들 수 있습니다. 또한 서로 다른 주석 계층을 결합할 수 있으며 그림 영역 내부의 텍스트를 오버레이하여 주석이 추가된 중요한 이벤트, 패턴 및 데이터의 영역에 배치할 수 있습니다.
[!Note] These features are designed to support cartesian axes and does not currently support radius or angle axes.
예를 들어, 주식 이벤트와 패턴으로 주식 가격에 주석을 달 수 있습니다.
이 샘플이 마음에 드시나요? 당사의 완전한 React 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.
React Data Annotation Slice Layer Example
In React, the link:{DataChartLink}.DataAnnotationSliceLayer.html[DataAnnotationSliceLayer] renders multiple vertical or horizontal lines that slice the chart at multiple values of an axis in the IgrDataChart component. This data annotation layer is often used to annotate important events (e.g. company quarter reports) on x-axis or important values on y-axis. Setting the TargetAxis property to y-axis will render data annotation layer as horizontal slices or setting TargetAxis property to x-axis will render data annotation layer as vertical slices. Similarly to all series, the DataAnnotationSliceLayer also supports data binding via the DataSource property that can be set to a collection of data items which should have at least 1 numeric data column mapped to the AnnotationValueMemberPath property.
예를 들어 DataAnnotationSliceLayer를 사용하여 주식 분할 및 수익 보고서 결과와 같은 중요한 이벤트로 주가에 주석을 달 수 있습니다.
React Data Annotation Strip Layer Example
In React, the IgrDataAnnotationStripLayer renders multiple vertical or horizontal strips between 2 values on an axis in the IgrDataChart component. This data annotation layer can be used to annotate duration of events (e.g. stock market crash) on x-axis or important range of values on y-axis. Setting the TargetAxis property to y-axis will render data annotation layer as horizontal strips or setting TargetAxis property to x-axis will render data annotation layer as vertical strips. Similarly to all series, the IgrDataAnnotationStripLayer also supports data binding via the DataSource property that can be set to a collection of data items which should have at least 1 numeric data column mapped to the AnnotationValueMemberPath property.
For example, you can use IgrDataAnnotationStripLayer to annotate chart with stock market crashes and changes in federal interest rates.
React Data Annotation Line Layer Example
In React, IgrDataAnnotationLineLayer renders multiple lines between 2 points in plot area of the IgrDataChart component. This data annotation layer can be used to annotate stock chart with growth and decline in stock prices. Similarly to all series, the DataAnnotationLineLayer also supports data binding via the DataSource property that can be set to a collection of data items which should have at least 4 numeric data columns representing x/y coordinates of starting point and ending point of the lines. The starting points should be mapped using using StartValueXMemberPath and StartValueYMemberPath properties and the ending points should be mapped using EndValueXMemberPath and EndValueYMemberPath properties.
예를 들어 DataAnnotationLineLayer를 사용하여 주가의 성장 및 하락 패턴과 y축의 52주 최고가 및 최저가에 주석을 달 수 있습니다.
React Data Annotation Rect Layer Example
In React, the IgrDataAnnotationRectLayer renders multiple rectangles defined by starting and ending points in plot area of the IgrDataChart component. This data annotation layer can be used to annotate region of plot area such as bearish patterns in stock prices. Similarly to all series, the DataAnnotationRectLayer also supports data binding via the DataSource property that can be set to a collection of data items which should have at least 4 numeric data columns representing x/y coordinates of starting point and ending point of the rectangles. The starting points should be mapped using using StartValueXMemberPath and StartValueYMemberPath properties and the ending points should be mapped using EndValueXMemberPath and EndValueYMemberPath properties.
예를 들어 DataAnnotationRectLayer를 사용하여 y축에서 약세 패턴과 주가 격차에 주석을 달 수 있습니다.
React Data Annotation Band Layer Example
In React, the IgrDataAnnotationBandLayer renders multiple skewed rectangles (free-form parallelogram) between 2 points in plot area of the IgrDataChart component. This data annotation layer can be used to annotate range of growth and decline in stock prices. Similarly to all series, the DataAnnotationBandLayer also supports data binding via the DataSource property that can be set to a collection of data items which should have at least 4 numeric data columns representing x/y coordinates of starting point and ending point of the lines. The starting points should be mapped using StartValueXMemberPath and StartValueYMemberPath properties and the ending points should be mapped using EndValueXMemberPath and EndValueYMemberPath properties. In addition, you can specify thickness/size of the skewed rectangle by binding numeric data column to the AnnotationBreadthMemberPath property.
예를 들어 DataAnnotationBandLayer를 사용하여 주가 상승 범위에 주석을 달 수 있습니다.
API References
다음은 위 섹션에서 언급된 API 멤버 목록입니다.
TargetAxis: This property specifies which axis should have an enabled DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer.DataSource: This property binds data to the annotation layer to provide the precise shape.StartValueXMemberPath: This property is a mapping to the name of the data column with x-positions for the start of the DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer.StartValueYMemberPath: This property is a mapping to the name of data column with y-positions for the start of the DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer.EndValueXMemberPath: This property is a mapping to the data column with x-positions for the end of the DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer.EndValueYMemberPath: This property is a mapping to the data column with y-positions for end of the DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer.StartLabelXMemberPath: This property is a mapping to the data column representing the overlay label for the starting position of the xAxis along the axis.StartLabelXDisplayMode|StartLabelYDisplayMode|EndLabelXDisplayMode|EndLabelYDisplayMode|CenterLabelXDisplayMode: These properties specify what should annotation labels display on starting, ending, or center of the annotation shape, e.g. mapped data value, mapped data label, axis value, or hide a given annotation label.StartLabelYMemberPath: This property is a mapping to the data column representing the axis label for the starting position ofIgrDataAnnotationBandLayer,IgrDataAnnotationLineLayer,IgrDataAnnotationRectLayeron the y-axis.EndLabelYMemberPath: This property is a mapping to the data column representing the axis label for the ending position ofIgrDataAnnotationBandLayer,IgrDataAnnotationLineLayer,IgrDataAnnotationRectLayeron the y-axis.