Angular 차트 주석

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

Angular Annotations Example

다음 예는 Angular 차트에서 사용 가능한 주석 레이어를 보여줍니다. 확인란을 클릭하여 각 레이어를 켜고 끕니다.

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

Angular Crosshair Layer

The IgxCrosshairLayerComponent renders as crossing lines intersecting at the actual value of every series that they are configured to target with each series rendering a separate set of lines.

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

수평의
수직의
둘 다

The chart's crosshairs can also be configured to snap to data points by setting the crosshairsSnapToData property to true, otherwise the crosshairs will be interpolated between data points. Annotations can also be enabled to display the crosshair's value along the axis.

You can configure the crosshair layer so that the layer will only display on one specific series, as by default they will target all series in the chart control. To achieve this, set the targetSeries property.

By default, the color of the crosshair lines is a lighter color than the series that it is interacting with. However, this default setting can be overridden so that you can select a color that will be used for the crosshair lines. This is done by setting the brush property of the Crosshair Layer.

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

Angular Final Value Layer

The IgxFinalValueLayerComponent of the IgxDataChartComponent control provides a quick view along the axis of the ending value displayed in a series.

You can configure this annotation to target a specific series if you want to have multiple final value layers present with different configurations. This can be done be setting the targetSeries property.

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

axisAnnotationBackground: This property is used to choose the brush for the annotation's background color. The default is to use the series brush.
axisAnnotationTextColor: This property is used to choose the brush for the annotation's text color.
axisAnnotationOutline: This property is used to choose the brush for the annotation's outline color.

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

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

Angular Callout Layer

The IgxCalloutLayerComponent displays annotations from existing or new data on the chart control. The annotations appear next to the given data values in the data source.

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

You can configure the callouts to target a specific series if you want to have multiple callout layers present with different configurations. This can be done by setting the targetSeries property.