Angular 차트 오버레이

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

    Angular Value Overlay Example

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

    Angular 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.

    숫자 X 또는 Y축을 사용할 때, 속성은ValueMemberPath 값 오버레이를 그리려는 축의 실제 숫자 값을 반영해야 합니다. X 또는 Y 축을 사용할 때, 값ValueMemberPath 오버레이가 나타나길 원하는 카테고리의 인덱스를 반영해야 합니다.

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

    IgxValueOverlayComponent외관 속성은 SIgxSeriesComponent​brush and s. 에서 상속되며thickness, 예를 들어 다른 유형의 급수와 동일한 방식으로 작동한다.

    또한 aIgxValueOverlayComponent에 축 주석을 표시하여 소유 축에 겹침의 값을 표시하는 것도 가능합니다. 이를 보여주기 위해 속성을 true로 설정할isAxisAnnotationEnabled 수 있습니다.

    Angular Value Layer

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

    Applying the IgxValueLayerComponent in the IgxCategoryChartComponent and IgxFinancialChartComponent 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 IgxDataChartComponent, this is done by adding a IgxValueLayerComponent to the IgxSeriesComponent 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.

    특정 속성이 요소 사용IgxValueLayerComponent 시 고려되지 않도록 하고 싶다면, 레이어에 속성을 설정할targetSeries 수 있습니다. 이렇게 하면 레이어가 당신이 정의한 급수를 타겟팅하도록 강제합니다. 한 번IgxValueLayerComponent에 원하는 만큼 많은IgxDataChartComponent 요소를 넣을 수 있습니다.

    다음 예시는 다음과 같은valueLines 차이IgxCategoryChartComponent의 사용법을 보여줍니다:

    Angular Financial Overlays

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

    Chart Overlay Text

    The Angular IgxValueOverlayComponent, IgxValueLayerComponent, 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.

    예를 들어,IgxDataAnnotationSliceLayerComponent와IgxValueOverlayComponent를 사용IgxValueLayerComponent 해 오버레이 텍스트를 표시할 수 있습니다.

    Styling Overlay Text

    이 코드 예시는 오버레이 텍스트IgxDataAnnotationSliceLayerComponent​IgxValueOverlayComponent​IgxValueLayerComponent를 어떻게 스타일링하고 커스터마이즈하는지 보여줍니다.

    Additional Resources

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

    API References

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