Web Components 차트 주석

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

Web Components Annotations Example

다음 예제에서는 Web Components 차트에서 사용할 수 있는 주석 계층을 보여 줍니다. 확인란을 클릭하여 각 레이어를 켜고 끕니다.

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

Web Components Crosshair Layer

렌더링은IgcCrosshairLayerComponent 각 시리즈가 타겟팅한 실제 값과 교차하는 교차선으로 나타나며, 각 시리즈는 별도의 선 집합을 렌더링합니다.

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

• 수평의
• 수직의
• 둘 다

차트의 십자선은 속성을 true로 설정crosshairsSnapToData 하여 데이터 점에 스냅하도록 설정할 수도 있으며, 그렇지 않으면 교차선이 데이터 점 간에 보간됩니다. 또한 주석을 통해 십자선 값을 축을 따라 표시할 수 있습니다.

십자선 레이어를 설정하면 기본적으로 차트 컨트롤에서 모든 시리즈를 대상으로 하므로, 해당 레이어가 특정 시리즈에만 표시되도록 설정할 수 있습니다. 이를 위해 속성을 설정targetSeries 하세요.

기본적으로 십자선 선의 색은 상호작용하는 계열보다 더 밝은 색입니다. 하지만 이 기본 설정은 교차선 선에 사용할 색상을 선택할 수 있도록 오버라이드할 수 있습니다. 이는 십자선 레이어의 속성을 설정brush 함으로써 이루어집니다.

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

Web Components Final Value Layer

컨트롤의IgcFinalValueLayerComponent이IgcDataChartComponent 기능은 축을 따라 일렬로 표시된 최종 값의 빠른 시야를 제공합니다.

여러 최종 값 레이어를 서로 다른 구성으로 설정하고 싶다면, 이 주석을 특정 시리즈를 대상으로 설정할 수 있습니다. 이것은 속성을 설정targetSeries 함으로써 할 수 있습니다.

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

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

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

<igc-category-chart
     id="chart"
     final-value-annotations-visible="true">
</igc-category-chart>

Web Components Callout Layer

​IgcCalloutLayerComponent기존 또는 새로운 데이터에서 얻은 주석을 차트 컨트롤에 표시합니다. 주석은 데이터 소스에서 주어진 데이터 값 옆에 표시됩니다.

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

여러 콜아웃 레이어를 서로 다른 구성으로 두고 싶다면, 특정 시리즈를 대상으로 콜아웃을 설정할 수 있습니다. 이 작업은 속성을 설정targetSeries 함으로써 할 수 있습니다.

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

• calloutLeaderBrush: 이 속성은 레이어의 콜아웃을 위한 리더 라인의 브러시를 선택하는 데 사용됩니다.
• calloutOutline: 이 속성은 주석의 윤곽선 색상을 사용할 브러시를 선택하는 데 사용됩니다.
• calloutBackground: 이 속성은 주석의 배경색을 사용할 브러시를 선택하는 데 사용됩니다. 기본은 시리즈 브러시를 사용하는 것입니다.
• calloutTextColor: 이 속성은 주석의 텍스트 색상을 선택하는 데 사용됩니다.
• calloutStrokeThickness: 이 속성은 콜아웃 백킹의 두께를 선택하는 데 사용됩니다.
• calloutCornerRadius: 이 속성은 콜아웃의 모서리를 곡선으로 만드는 데 사용됩니다.
• allowedPositions: 이 속성은 콜아웃 계층이 사용할 수 있는 위치를 선택하는 데 사용됩니다. 예를 들어, 위, 아래야

다음 예에서는 위에 나열된 속성을 설정하여 콜아웃 레이어 주석의 스타일을 지정하는 방법을 보여줍니다.

<igc-category-chart
     id="chart"
     width="800px"
     height="400px"
     callouts-visible="true">
</igc-category-chart>

let chart = (document.getElementById("chart") as IgcCategoryChartComponent);

chart.dataSource = data;
chart.calloutsDataSource = categoryData;
chart.calloutsXMemberPath = "index";
chart.calloutsYMemberPath = "value";
chart.calloutsLabelMemberPath = "info";

API References

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

• crosshairsSnapToData
• IgcCategoryChartComponent