React 차트 주석

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

React Annotations Example

다음 예는 React 차트에서 사용 가능한 주석 레이어를 보여줍니다. 체크박스를 클릭하여 각 레이어를 켜고 끕니다.

이 샘플이 마음에 드시나요? 당사의 완전한 React 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

React Crosshair Layer

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

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

• 수평의
• 수직의
• 둘 다

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

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

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

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

React Final Value Layer

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

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

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

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

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

 <IgrCategoryChart
    dataSource={this.state.data}
    finalValueAnnotationsVisible={true} />

React Callout Layer

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

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

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

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

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

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

 <IgrCategoryChart
    dataSource={this.state.data}
    calloutsVisible={true}
    calloutsDataSource={this.state.calloutData}
    calloutsXMemberPath="index"
    calloutsYMemberPath="value"
    calloutsLabelMemberPath="info" />

API References

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

• crosshairsSnapToData
• IgrCategoryChart