Angular 차트 오버레이

    AngularIgxDataChartComponent은 하나의 숫자 값에 수평 또는 수직 선을 배치할 수 있게 해줍니다.IgxValueOverlayComponent이 방법은 특정 급수의 평균이나 중앙값과 같은 데이터를 시각화하는 데 도움이 됩니다.

    Angular Value Overlay Example

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

    Angular Value Overlay Properties

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

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

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

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

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

    Angular Value Layer

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

    그리고IgxValueLayerComponent 컴포넌트에IgxCategoryChartComponent 적용하려면IgxFinancialChartComponent 차트에 속성을 설정valueLines 함으로써 이루어집니다. 이 성질은 열거 집합을ValueLayerValueMode 가져옵니다. 같은 차트 내에서 여러ValueLayerValueMode 열거valueLines 항목을 추가하여 여러 가치 층을 혼합할 수 있습니다.

    안에IgxDataChartComponent, 이는 다음을 추가하여 수행됩니다.IgxValueLayerComponent 그IgxSeriesComponent 차트를 수집한 후 다음ValueMode 재산을ValueLayerValueMode 열거형. 이 각 열거와 그 의미는 아래에 나열되어 있습니다:

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

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

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

    Angular Financial Overlays

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

    Chart Overlay Text

    AngularIgxValueOverlayComponent,IgxValueLayerComponent, 모든 데이터 주석 레이어는 XamDataChart 컴포넌트의 플롯 영역 내에서 커스텀 오버레이 텍스트를 렌더링할 수 있습니다. 이 오버레이 텍스트를 사용해 중요한 이벤트(예: 회사 분기 보고서)를 x축에 주석을, y축에 중요한 값을 레이어와 관련해 주석을 달 수 있습니다.

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

    Styling Overlay Text

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

    Additional Resources

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

    API References

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