React 축 옵션
모든 Ignite UI for React 차트에서 축은 제목, 레이블, 범위와 같은 시각적 구성에 대한 속성을 제공합니다. 이러한 기능은 아래 제공된 예에서 설명됩니다.
Axis Titles Example
React 차트의 축 제목 기능을 사용하면 차트에 상황에 맞는 정보를 추가할 수 있습니다. 다양한 글꼴 스타일, 색상, 여백 및 정렬을 적용하는 등 다양한 방법으로 축 제목의 모양과 느낌을 사용자 정의할 수 있습니다.
Axis Labels Example
React 차트를 사용하면 차트 축에 표시되는 레이블의 글꼴 구성, 서식 지정 및 스타일 지정을 완벽하게 제어할 수 있습니다. 축 레이블의 회전 각도, 여백, 가로 및 세로 정렬, 색상, 패딩, 가시성을 변경할 수 있습니다. 다음 예에서는 축의 이러한 기능을 사용하는 방법을 보여줍니다.
Axis Labels Management & Formatting
차트의 축에는 소유 축의 레이블에 사용할 수 있는 공간의 양에 관해 향상된 계산을 수행하는 기능이 있습니다. 이 향상된 계산을 통해 축은 주어진 축에 대해 더 많은 레이블을 표시하기 위해 주어진 공간의 양을 최적화할 수 있습니다.
이 향상된 계산은 사용자가 선택해야 하는 작업으로, useEnhancedIntervalManagement 속성을 true로 설정하여 수행할 수 있습니다. 그런 다음 축의 interval 속성을 수동으로 설정하지 않고 축의 크기에 맞출 수 있는 만큼 많은 레이블을 표시하려는 경우 축의 enhancedIntervalPreferMoreCategoryLabels 속성을 true로 설정할 수 있습니다.
또한 차트에는 할당된 공간에 맞지 않는 경우 레이블의 자동 회전을 고려하는 기능과 레이블이 들어갈 수 있도록 플롯 영역에 자동 여백을 적용하는 기능도 있습니다. 이는 먼저 차트의 autoMarginAndAngleUpdateMode 속성을 SizeChanging 또는 SizeChangingAndZoom으로 설정하여 처음에 선택할 수 있는 것입니다. 원하는 경우 레이블에 적용된 자동 여백과 각도를 언제 재평가할지 차트에 알려줍니다.
autoMarginAndAngleUpdateMode 설정한 후 shouldAutoExpandMarginForInitialLabels 속성을 true로 설정하여 자동 여백을 선택하거나 자동 회전을 위해 shouldConsiderAutoRotationForInitialLabels 속성을 true로 설정할 수 있습니다. autoExpandMarginExtraPadding 및 autoExpandMarginMaximumValue를 설정하여 각각 추가 공간 또는 가능한 최대 여백을 제공함으로써 적용되는 자동 여백을 추가로 사용자 정의할 수도 있습니다.
다음과 같은 사용자 지정 레이블 형식 IgrNumberFormatSpecifier 그리고 IgrDateTimeFormatSpecifier를 통해 각 축에 추가할 수 있습니다. XAxisLabelFormatSpecifier 그리고 YAxisLabelFormatSpecifier 컬렉션. 일반적으로 Intl.NumberFormat 및 Intl.DateTimeFormat 언어에 민감한 숫자, 날짜 및 시간 형식을 적용하는 데 사용됩니다. 사용자 지정 형식을 레이블에 적용하려면 yAxisLabelFormat 또는 xAxisLabelFormat에서 데이터 항목의 속성 이름으로 설정해야 합니다. IgrCategoryChart 예. {Date}. 에 대한 IgrFinancialChart 숫자는 숫자 축을 사용하기 때문에 컨텍스트이므로 다음과 같이 설정해야 합니다. {0}.
다음 예에서는 미국 최고의 박스오피스 영화에 대한 $USD 가격을 나타내기 위해 IgrNumberFormatSpecifier를 사용하여 yAxis의 형식을 지정합니다.
Axis Range Example
React 차트에서는 숫자 또는 시간 축의 범위 최소값과 범위 최대값을 정의할 수 있습니다. 범위 최소값은 축의 가장 낮은 값이고 범위 최대값은 축의 가장 높은 값입니다. 이는 yAxisMinimumValue 및 yAxisMaximumValue 옵션을 설정하여 설정됩니다.
기본적으로 차트는 데이터의 해당 최저 및 최고 값 포인트를 기반으로 숫자 및 시간 축 범위의 최소값과 최대값을 계산하지만 이 자동 계산은 모든 경우에 데이터 포인트 세트에 적합하지 않을 수 있습니다. 예를 들어, 데이터의 최소값이 850인 경우 yAxisMinimumValue를 800으로 설정하여 축 최소값과 데이터 포인트의 최저값 사이에 공백 값 50이 있도록 할 수 있습니다. yAxisMaximumValue 속성을 사용하여 데이터 포인트의 축 최소값과 최대값에 동일한 아이디어를 적용할 수 있습니다.
Axis Modes & Scale
IgrFinancialChart 및 IgrCategoryChart 컨트롤에서는 yAxisIsLogarithmic 속성이 true로 설정된 경우 데이터가 y축을 따라 로그 눈금으로 표시되는지, 이 속성이 false(기본값)로 설정된 경우 선형 눈금으로 표시되는지 선택할 수 있습니다. yAxisLogarithmBase 속성을 사용하면 로그 스케일의 기준을 기본값 10에서 다른 정수 값으로 변경할 수 있습니다.
IgrFinancialChart 및 컨트롤을 사용하면 Numeric 및 PercentChange 모드를 제공하는 yAxisMode 속성을 사용하여 y축을 따라 데이터가 표시되는 방식을 선택할 수 있습니다. Numeric 모드는 정확한 값으로 데이터를 표시하는 반면 PercentChange 모드는 제공된 첫 번째 데이터 포인트에 대한 백분율 변화로 데이터를 표시합니다. 기본값은 Numeric 모드입니다.
yAxisMode 속성 외에도 IgrFinancialChart 컨트롤에는 x축에 대한 Time 및 Ordinal 모드를 제공하는 xAxisMode 속성이 있습니다. Time 모드는 데이터의 공백을 위해 x축을 따라 공간을 렌더링합니다(예: 주말이나 공휴일에는 주식 거래가 없음). Ordinal 모드는 데이터가 존재하지 않는 날짜 영역을 축소합니다. 기본값은 Ordinal 모드입니다.
Axis Gap Example
React 차트의 xAxisGap 속성은 플롯된 계열의 열 또는 막대 사이의 공간 크기를 결정합니다. 이 속성은 0.0에서 1.0 사이의 숫자 값을 허용합니다. 값은 계열 간에 사용 가능한 픽셀 수 중 상대적인 간격 너비를 나타냅니다. 이 속성을 0으로 설정하면 시리즈 간에 렌더링된 간격이 없음을 의미하고, 1로 설정하면 사용 가능한 최대 간격이 렌더링됩니다.
React 차트의 xAxisMaximumGap 속성은 허용할 최대 간격 값을 결정합니다. 이 기본값은 1.0으로 설정되어 있지만 xAxisGap 설정에 따라 변경될 수 있습니다.
React 차트의 xAxisMinimumGapSize 속성은 가능한 경우 범주 사이의 간격에 사용할 최소 픽셀 양을 결정합니다.
다음 예는 뉴욕시 센트럴 파크의 평균 최대 온도(섭씨)를 보여줍니다. 기둥 차트와 xAxisGap 처음에는 1로 설정되므로 열 사이에 전체 범주의 너비가 있게 됩니다. 이 예에는 간격을 구성할 수 있는 슬라이더가 있어 다양한 값의 역할을 확인할 수 있습니다.
Axis Overlap Example
React 차트의 xAxisOverlap 속성을 사용하면 렌더링된 열 또는 플롯된 계열의 막대의 겹침을 설정할 수 있습니다. 이 속성은 -1.0에서 1.0 사이의 숫자 값을 허용합니다. 값은 각 계열에 전용으로 사용 가능한 픽셀 수 중 상대적인 중복을 나타냅니다. 이 속성을 음수 값(-1.0까지)으로 설정하면 범주가 서로 멀어지고 범주 사이에 간격이 생깁니다. 반대로 이 속성을 양수 값(최대 1.0)으로 설정하면 범주가 서로 겹치게 됩니다. 값이 1이면 차트가 범주를 서로 겹쳐서 렌더링하도록 지시합니다.
다음 예에서는 프랜차이즈의 총 세계 박스오피스 수익과 시리즈에서 가장 높은 수익을 올린 영화를 비교하여 전 세계에서 가장 높은 수익을 올린 영화 프랜차이즈를 비교합니다. 기둥 차트와 xAxisOverlap 처음에는 1로 설정되므로 열이 서로 완전히 겹칩니다. 이 예에는 서로 다른 값의 역할을 확인할 수 있도록 겹침을 구성할 수 있는 슬라이더가 있습니다.
Additional Resources
다음 항목에서 관련 차트 기능에 대한 자세한 내용을 확인할 수 있습니다.
API References
다음은 위 섹션에서 언급된 API 멤버 목록입니다.