Angular 차트 오버레이

    Angular IgxDataChartComponentIgxValueOverlayComponent를 사용하여 정의한 단일 숫자 값에 수평 또는 수직 선을 배치할 수 있도록 합니다. 이를 통해 특정 시리즈의 평균 또는 중앙값과 같은 데이터를 시각화하는 데 도움이 될 수 있습니다.

    Angular Value Overlay Example

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

    EXAMPLE
    DATA
    MODULES
    TS
    HTML
    SCSS

    Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.

    Angular Value Overlay Properties

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

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

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

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

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

    Angular Value Layer

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

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

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

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

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

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

    EXAMPLE
    DATA
    MODULES
    TS
    HTML
    SCSS

    Angular Financial Overlays

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

    App Builder | CTA Banner

    Additional Resources

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

    API References

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