Angular 차트 주석

Angular 차트의 호버 상호 작용 및 주석은 시리즈 컬렉션에 추가되는 시리즈인 호버 상호 작용 레이어를 통해 구현됩니다. 이러한 레이어는 커서 위치에 따라 달라집니다. 이러한 각 주석 레이어는 개별적으로 사용하거나 다른 주석 레이어와 결합하여 강력한 호버 상호 작용을 제공할 수 있는 다양한 호버 상호 작용을 제공합니다.

Angular Annotations Example

다음 예에서는 Angular 차트에서 사용할 수 있는 주석 레이어를 보여줍니다. 각 레이어를 켜거나 끄려면 확인란을 클릭하세요.

이 샘플이 마음에 드시나요? 전체 Angular 툴킷에 액세스하여 몇 분 만에 나만의 앱 구축을 시작해 보세요. 무료로 다운로드하세요.

Angular Crosshair Layer

IgxCrosshairLayerComponent는 각 계열이 별도의 선 세트를 렌더링하는 대상으로 구성된 모든 계열의 실제 값에서 교차하는 교차 선으로 렌더링됩니다.

십자형 유형은 다음과 같습니다.

수평의
수직의
둘 다

crosshairsSnapToData 속성을 true로 설정하여 차트의 십자선을 데이터 포인트에 맞추도록 구성할 수도 있습니다. 그렇지 않으면 십자선이 데이터 포인트 사이에 삽입됩니다. 축을 따라 십자선 값을 표시하도록 주석을 활성화할 수도 있습니다.

레이어가 하나의 특정 시리즈에만 표시되도록 십자선 레이어를 구성할 수 있습니다. 기본적으로 레이어는 차트 컨트롤의 모든 시리즈를 대상으로 하기 때문입니다. 이를 달성하려면 targetSeries 속성을 설정하세요.

기본적으로 십자선의 색상은 상호 작용하는 계열보다 밝은 색상입니다. 그러나 이 기본 설정을 재정의하여 십자선에 사용할 색상을 선택할 수 있습니다. 이는 십자선 레이어의 brush 속성을 설정하여 수행됩니다.

다음 예에서는 십자선 레이어를 구성하되 단일 시리즈를 대상으로 하고 유형을 세로로 설정하고 브러시 색상의 스타일을 지정하는 방법을 보여줍니다.

Angular Final Value Layer

IgxDataChartComponent 컨트롤의 IgxFinalValueLayerComponent는 시리즈에 표시되는 종료 값의 축을 따라 빠른 보기를 제공합니다.

서로 다른 구성으로 여러 최종 값 계층을 표시하려는 경우 특정 시리즈를 대상으로 이 주석을 구성할 수 있습니다. 이는 targetSeries 속성을 설정하여 수행할 수 있습니다.

다음 속성을 설정하여 이 주석을 사용자 정의할 수도 있습니다.

axisAnnotationBackground: 이 속성은 주석의 배경색에 대한 브러시를 선택하는 데 사용됩니다. 기본값은 시리즈 브러시를 사용하는 것입니다.
axisAnnotationTextColor: 이 속성은 주석의 텍스트 색상에 대한 브러시를 선택하는 데 사용됩니다.
axisAnnotationOutline: 이 속성은 주석의 윤곽선 색상에 대한 브러시를 선택하는 데 사용됩니다.

다음 예에서는 위에 나열된 속성을 설정하여 최종 값 계층 주석의 스타일을 지정하는 방법을 보여줍니다.

<igx-category-chart
    [dataSource]="data"
    finalValueAnnotationsVisible="true">
</igx-category-chart>

Angular Callout Layer

IgxCalloutLayerComponent는 차트 컨트롤에 기존 데이터 또는 새 데이터의 주석을 표시합니다. 주석은 데이터 소스의 지정된 데이터 값 옆에 표시됩니다.

설명선 주석을 사용하여 메모나 데이터 포인트에 대한 특정 세부정보 등 사용자에게 알리고 싶은 추가 정보를 표시하세요.

서로 다른 구성으로 여러 콜아웃 레이어를 표시하려는 경우 특정 시리즈를 대상으로 콜아웃을 구성할 수 있습니다. 이는 targetSeries 속성을 설정하여 수행할 수 있습니다.