React 축 레이아웃
모든 Ignite UI for React 위치와 같은 많은 축 레이아웃 옵션을 구성하는 옵션과 시리즈 간에 축을 공유하거나 동일한 차트에 여러 축을 갖는 기능이 포함되어 있습니다. 이러한 기능은 아래 제공된 예에서 설명됩니다.
[!Note] the following examples can be applied to
IgrCategoryChart
as well asIgrFinancialChart
controls.
Axis Locations Example
모든 축에 대해 차트 그림 영역과 관련하여 축 위치를 지정할 수 있습니다. React 차트의 xAxisLabelLocation
속성을 사용하면 x축 선과 해당 레이블을 플롯 영역 위 또는 아래에 배치할 수 있습니다. 마찬가지로 yAxisLabelLocation
속성을 사용하여 플롯 영역의 왼쪽 또는 오른쪽에 y축을 배치할 수 있습니다.
다음 예에서는 2009년 이후 생산된 재생 가능 전기량을 선형 차트로 표시합니다. 차트 플롯 영역 내부 또는 외부의 왼쪽 또는 오른쪽에 레이블이 배치될 때 축이 어떻게 보이는지 시각화할 수 있도록 yAxisLabelLocation
구성할 수 있는 드롭다운이 있습니다.
Axis Advanced Scenarios
고급 축 레이아웃 시나리오의 경우 React 데이터 차트 사용하여 축을 공유하고, 동일한 플롯 영역에 여러 y축 및/또는 x축을 추가하거나, 특정 값에서 축을 교차할 수도 있습니다. 다음 예에서는 IgrDataChart
의 이러한 기능을 사용하는 방법을 보여줍니다.
Axis Sharing Example
React IgrDataChart
의 동일한 플롯 영역에서 여러 축을 공유하고 추가할 수 있습니다. 공유 IgrTimeXAxis
사용하고 여러 IgrNumericYAxis
추가하여 광범위한 값(예: 주가 및 주식 거래량)을 갖는 많은 데이터 소스를 표시하는 것이 일반적인 시나리오입니다.
다음 예에서는 주식형 차트와 기둥 차트가 표시된 주식 가격 및 거래량 차트를 보여줍니다. 이 경우 왼쪽의 Y축은 기둥 차트에서 사용되고 오른쪽의 Y축은 주식형 차트에서 사용되며 X축은 두 축이 공유됩니다.
Axis Crossing Example
플롯 영역 외부에 축을 배치하는 것 외에도 React IgrDataChart
는 플롯 영역 내부에 축을 배치하고 특정 값에서 교차하도록 하는 옵션도 제공합니다. 예를 들어 x축과 y축 모두에 crossingAxis
및 crossingValue
속성을 설정하여 축 선과 축 레이블이 (0, 0) 원점에서 교차하도록 렌더링하여 삼각 차트를 만들 수 있습니다.
다음 예에서는 X축과 Y축이 (0, 0) 원점에서 서로 교차하는 분산 스플라인 차트로 표현되는 Sin 및 Cos 파동을 보여줍니다.
Additional Resources
다음 항목에서 관련 차트 기능에 대한 자세한 내용을 확인할 수 있습니다.
API References
다음은 위 섹션에서 언급된 API 멤버 목록입니다. 위 섹션의 d:
IgrDataChart |
IgrCategoryChart |
---|---|
Axes ➔ IgrNumericYAxis ➔ crossingAxis |
없음 |
Axes ➔ IgrNumericYAxis ➔ crossingValue |
없음 |
Axes ➔ IgrNumericXAxis ➔ isInverted |
xAxisInverted |
Axes ➔ IgrNumericYAxis ➔ isInverted |
yAxisInverted |
Axes ➔ IgrNumericYAxis ➔ LabelLocation |
yAxisLabelLocation |
Axes ➔ IgrNumericXAxis ➔ LabelLocation |
xAxisLabelLocation |
Axes ➔ IgrNumericYAxis ➔ LabelHorizontalAlignment |
yAxisLabelHorizontalAlignment |
Axes ➔ IgrNumericXAxis ➔ LabelVerticalAlignment |
xAxisLabelVerticalAlignment |
Axes ➔ IgrNumericYAxis ➔ LabelVisibility |
yAxisLabelVisibility |
Axes ➔ IgrNumericXAxis ➔ LabelVisibility |
xAxisLabelVisibility |