React 차트 오버레이

    The React IgrDataChart allows for placement of horizontal or vertical lines at a single numeric value that you define through usage of the IgrValueOverlay. This can help you to visualize data such as the mean or median of a particular series.

    React Value Overlay Example

    다음 예에서는 몇 개의 수평 값 오버레이가 표시된 기둥 차트 보여줍니다.

    React Value Overlay Properties

    Unlike other series types that use a ItemsSource for data binding, the value overlay uses a ValueMemberPath property to bind a single numeric value. In addition, the value overlay requires you to define a single axis to use. If you use an X-axis, the value overlay will be a vertical line, and if you use a Y-axis, it will be a horizontal line.

    When using a numeric X or Y axis, the ValueMemberPath property should reflect the actual numeric value on the axis where you want the value overlay to be drawn. When using a category X or Y axis, the ValueMemberPath should reflect the index of the category at which you want the value overlay to appear.

    숫자 각도 축과 함께 값 오버레이를 사용하면 차트 중앙에서 선으로 나타나고 숫자 반경 축을 사용하면 원으로 나타납니다.

    IgrValueOverlay appearance properties are inherited from IgrSeries and so brush and thickness for example are available and work the same way they do with other types of series.

    It is also possible to show an axis annotation on a IgrValueOverlay to show the value of the overlay on the owning axis. In order to show this, you can set the isAxisAnnotationEnabled property to true.

    React Value Layer

    React 차팅 구성 요소는 최소값, 최대값, 평균값 등 데이터의 다양한 초점을 표시하기 위해 값 선을 사용하는 기능도 제공합니다.

    Applying the IgrValueLayer in the IgrCategoryChart and IgrFinancialChart components is done by setting the valueLines property on the chart. This property takes a collection of the ValueLayerValueMode enumeration. You can mix and match multiple value layers in the same chart by adding multiple ValueLayerValueMode enumerations to the valueLines collection of the chart.

    In the IgrDataChart, this is done by adding a IgrValueLayer to the IgrSeries collection of the chart and then setting the ValueMode property to one of the ValueLayerValueMode enumerations. Each of these enumerations and what they mean is listed below:

    • Auto: The default value mode of the ValueLayerValueMode enumeration.
    • Average: Applies potentially multiple value lines to call out the average value of each series plotted in the chart.
    • GlobalAverage: Applies a single value line to call out the average of all of the series values in the chart.
    • GlobalMaximum: Applies a single value line to call out the absolute maximum value of all of the series values in the chart.
    • GlobalMinimum: Applies a single value line to call out the absolute minimum value of all of the series values in the chart.
    • Maximum: Applies potentially multiple value lines to call out the maximum value of each series plotted in the chart.
    • Minimum: Applies potentially multiple value lines to call out the minimum value of each series plotted in the chart.

    If you want to prevent any particular series from being taken into account when using the IgrValueLayer element, you can set the targetSeries property on the layer. This will force the layer to target the series that you define. You can have as many IgrValueLayer elements within a single IgrDataChart as you want.

    The following sample demonstrates usage of the different valueLines in the IgrCategoryChart:

    React Financial Overlays

    React Stock Chart에서 내장된 재무 오버레이와 지표를 표시할 수도 있습니다.

    Chart Overlay Text

    The React IgrValueOverlay, IgrValueLayer, and all Data Annotation Layers can render custom overlay text inside plot area of the XamDataChart component. You can use this overlay text to annotate important events (e.g. company quarter reports) on x-axis or important values on y-axis in relationship to the layers.

    For example, you can use IgrDataAnnotationSliceLayer, IgrValueOverlay, and IgrValueLayer to show overlay text.

    Styling Overlay Text

    This code example shows how to style and customize Overlay Text on the IgrDataAnnotationSliceLayer, IgrValueOverlay, and IgrValueLayer.

    Additional Resources

    다음 항목에서 관련 차트 유형에 대한 자세한 내용을 확인할 수 있습니다.

    API References

    다음은 위 섹션에서 언급된 API 멤버 목록입니다.