Web Components 차트 오버레이

    이 Web Components IgcDataChartComponent 사용하면 를 사용하여 정의하는 단일 숫자 값에 수평선 또는 수직선을 배치할 수 있습니다 IgcValueOverlayComponent. 이렇게 하면 특정 계열의 평균 또는 중앙값과 같은 데이터를 시각화하는 데 도움이 될 수 있습니다.

    Web Components Value Overlay Example

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

    Web Components Value Overlay Properties

    데이터 바인딩에 ItemsSource 사용하는 다른 계열 유형과 달리 값 오버레이는 ValueMemberPath 속성을 사용하여 단일 숫자 값을 바인딩합니다. 또한 값 오버레이를 사용하려면 사용할 단일 axis 정의해야 합니다. X축을 사용하면 값 오버레이가 수직선이 되고, Y축을 사용하면 수평선이 됩니다.

    숫자 X 또는 Y 축을 사용하는 경우 ValueMemberPath 속성은 값 오버레이를 그릴 축의 실제 숫자 값을 반영해야 합니다. 범주 X 또는 Y 축을 사용하는 경우 ValueMemberPath 값 오버레이를 표시할 범주의 인덱스를 반영해야 합니다.

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

    IgcValueOverlayComponent 모양 속성은 IgcSeriesComponent에서 상속되므로 brush 및 thickness을 사용할 수 있으며 다른 유형의 시리즈와 동일한 방식으로 작동합니다.

    ​IgcValueOverlayComponent에 축 주석을 표시하여 소유 축에 오버레이 값을 표시할 수도 있습니다. 이를 표시하려면 isAxisAnnotationEnabled 속성을 true로 설정하면 됩니다.

    Web Components Value Layer

    또한 Web Components 차트 구성 요소는 값 라인을 사용하여 최소값, 최대값 및 평균값과 같은 데이터의 다양한 초점을 호출하는 기능을 제공합니다.

    ​IgcCategoryChartComponent 및 IgcFinancialChartComponent 구성 요소에 IgcValueLayerComponent 적용하려면 차트에서 valueLines 속성을 설정하면 됩니다. 이 속성은 ValueLayerValueMode 열거형 컬렉션을 사용합니다. 차트의 valueLines 컬렉션에 여러 ValueLayerValueMode 열거를 추가하여 동일한 차트에서 여러 값 계층을 혼합하고 일치시킬 수 있습니다.

    ​IgcDataChartComponent 에서는 차트의 IgcSeriesComponent 컬렉션에 IgcValueLayerComponent 추가한 다음 ValueMode 속성을 ValueLayerValueMode 열거 중 하나로 설정하여 이 작업을 수행합니다. 각 열거형과 그 의미는 다음과 같습니다.

    • Auto: ValueLayerValueMode 열거형의 기본 값 모드입니다.
    • Average: 잠재적으로 여러 값 라인을 적용하여 차트에 표시된 각 계열의 평균 값을 표시합니다.
    • GlobalAverage: 단일 값 선을 적용하여 차트에 있는 모든 계열 값의 평균을 표시합니다.
    • GlobalMaximum: 단일 값 라인을 적용하여 차트에 있는 모든 계열 값의 절대 최대값을 표시합니다.
    • GlobalMinimum: 단일 값 선을 적용하여 차트에 있는 모든 계열 값의 절대 최소값을 표시합니다.
    • Maximum: 잠재적으로 여러 값 라인을 적용하여 차트에 표시된 각 계열의 최대값을 표시합니다.
    • Minimum: 잠재적으로 여러 값 라인을 적용하여 차트에 표시된 각 계열의 최소값을 표시합니다.

    ​IgcValueLayerComponent 요소를 사용할 때 특정 계열이 고려되지 않도록 하려면 레이어에서 targetSeries 속성을 설정하면 됩니다. 이렇게 하면 레이어가 정의한 계열을 대상으로 지정하게 됩니다. 단일 IgcDataChartComponent 내에 원하는 만큼 많은 IgcValueLayerComponent 요소를 가질 수 있습니다.

    다음 샘플은 IgcCategoryChartComponent에서 다양한 valueLines의 사용법을 보여줍니다.

    Web Components Financial Overlays

    또한 주식 차트에서 내장된 재무 오버레이 및 지표를 그릴 Web Components 있습니다.

    Chart Overlay Text (Beta)

    Web Components IgcValueOverlayComponent 및 IgcValueLayerComponent 모든 데이터 주석 레이어는 XamDataChart 구성 요소의 플롯 영역 내에서 사용자 정의 오버레이 텍스트를 렌더링할 수 있습니다. 이 오버레이 텍스트를 사용하여 레이어와 관련하여 x축의 중요한 이벤트(예: 회사 분기 보고서) 또는 y축의 중요한 값에 주석을 달 수 있습니다.

    예를 들어 다음을 사용할 수 있습니다. DataAnnotationSliceLayer, IgcValueOverlayComponent 그리고 IgcValueLayerComponent을 클릭하여 오버레이 텍스트를 표시합니다.

    Styling Overlay Text

    이 코드 예제에서는 오버레이 텍스트의 스타일을 지정하고 사용자 지정하는 방법을 보여줍니다. DataAnnotationSliceLayer, IgcValueOverlayComponent 그리고 IgcValueLayerComponent.

    <igc-data-annotation-slice-layer
    name="AnnoLayer"
    id="AnnoLayer"
    brush="green"
    annotation-text-color="white"
    annotation-label-member-path="label"
    annotation-value-member-path="value"
    overlay-text-color="red"
    overlay-text-background="green"
    overlay-text-border-color="black"
    overlay-text-member-path="label"
    overlay-text-vertical-margin="20"
    overlay-text-horizontal-margin="0"
    overlay-text-location="OutsideBottomCenter"
    overlay-text="OverlayText on DataAnnotationSliceLayer"
    thickness="2">
    </igc-data-annotation-slice-layer>

    Additional Resources

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

    API References

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