React 축 옵션
모든 Ignite UI for React 차트에서 축은 제목, 레이블, 범위와 같은 시각적 구성에 대한 속성을 제공합니다. 이러한 기능은 아래에 제공된 예에서 설명됩니다.
Axis Titles Example
React 차트의 축 제목 기능을 사용하면 차트에 문맥별 정보를 추가할 수 있습니다. 다양한 글꼴 스타일, 색상, 여백 및 정렬을 적용하는 등 다양한 방법으로 축 제목의 모양과 느낌을 사용자 지정할 수 있습니다.
Axis Labels Example
React Charts를 사용하면 차트의 축에 표시된 레이블의 글꼴을 구성, 서식 지정 및 스타일링하는 데 대한 완전한 제어가 가능합니다. 축 레이블의 회전 각도, 여백, 수평 및 수직 정렬, 색상, 패딩 및 가시성을 변경할 수 있습니다. 다음 예는 축의 이러한 기능을 사용하는 방법을 보여줍니다.
Axis Labels Management & Formatting
차트의 축에는 소유 축의 레이블에 사용할 수 있는 공간의 양에 관해 향상된 계산을 수행하는 기능이 있습니다. 이 향상된 계산을 통해 축은 주어진 축에 대해 더 많은 레이블을 표시하기 위해 주어진 공간의 양을 최적화할 수 있습니다.
이 향상된 계산은 속성을 true로 설정useEnhancedIntervalManagement 하면 선택해야 하는 사항입니다. 그리고 축의 속성을 수동으로 설정interval 하지 않고 축의 치수에 들어갈 수 있는 만큼 라벨을 표시하고 싶다면, 축의 속성을 true로 설정할enhancedIntervalPreferMoreCategoryLabels 수 있습니다.
차트는 또한 라벨이 할당된 공간에 맞지 않을 경우 자동 회전을 고려할 수 있으며, 라벨이 맞는지 확인하기 위해 그래프 영역에 자동 여백을 적용할 수 있습니다. 이 기능은 차트상의autoMarginAndAngleUpdateMode 속성을 먼저 또는 중 하나SizeChangingSizeChangingAndZoom로 설정함으로써 처음에 선택할 수 있는 것입니다. 이 방법은 원한다면 라벨에 적용한 자동 여진과 각도를 언제 재평가해야 하는지 차트에 알려줍니다.
를autoMarginAndAngleUpdateMode 설정한 후, 속성을 true로 설정shouldAutoExpandMarginForInitialLabels 하면 자동 마진에 참여하거나 자동 회전을 위해 속성을 true로 설정할shouldConsiderAutoRotationForInitialLabels 수 있습니다. 또한 자동 여백을 추가로 설정하여autoExpandMarginExtraPaddingautoExpandMarginMaximumValue 추가 공간이나 최대 여백을 각각 설정할 수 있습니다.
와IgrNumberFormatSpecifier 같은IgrDateTimeFormatSpecifier 맞춤형 라벨 형식은 와XAxisLabelFormatSpecifier 컬렉션을 통해YAxisLabelFormatSpecifier 각 축에 추가할 수 있습니다. Intl.NumberFormat 및 Intl.DateTimeFormat 언어 민감 숫자, 날짜 및 시간 포맷 적용에 일반적으로 사용됩니다. 라벨에 사용자 지정 형식을 적용하려면,yAxisLabelFormat 또는xAxisLabelFormat가 데이터 항목의 속성 이름IgrCategoryChart으로 설정되어야 합니다. 예를 들어,{Date} 숫자IgrFinancialChart는 숫자 축을 사용하기 때문에 문맥 역할을 하므로 이 값을 설정해야 합니다.{0}
다음 예시는 미국에서 최고 박스오피스 영화의 $USD 가격을 나타내는 yAxisIgrNumberFormatSpecifier를 나타냅니다.
Axis Range Example
In the React charts, you can define a range minimum and range maximum value of a numeric or time axis. The range minimum is the lowest value of the axis and the range maximum is the highest value of the axis. These are set by setting the yAxisMinimumValue and yAxisMaximumValue options.
기본적으로 차트는 데이터 내 가장 낮고 높은 값 포인트를 기준으로 수치 축과 시간축 범위의 최소값과 최대값을 계산하지만, 이 자동 계산이 모든 경우 데이터 포인트에 적합하지는 않을 수 있습니다. 예를 들어, 데이터 최소 값이 850이라면, 축yAxisMinimumValue 최소값과 가장 낮은 데이터 포인트 사이에 공간 값이 50이 되도록 를 800으로 설정하고 싶을 수 있습니다. 같은 개념은 축의 최소값과 데이터 포인트의 최대 값에도 적용할 수 있습니다.yAxisMaximumValue
Axis Modes & Scale
IgrFinancialChart그리고IgrCategoryChart 컨트롤에서 속성이yAxisIsLogarithmic 참으로 설정되었을 때 y축을 따라 로그 스케일로 데이터를 그릴지, 이 속성이 기본값인 false로 설정되었을 때 선형 스케일로 표시할지 선택할 수 있습니다. 이yAxisLogarithmBase 속성을 사용하면 로그 스케일의 기본 값인 10에서 다른 정수 값을 바꿀 수 있습니다.
와 컨트롤은IgrFinancialChart 제공yAxisMode와Numeric 모드를 사용하여PercentChange y축을 따라 데이터를 어떻게 표현할지 선택할 수 있게 해줍니다. 모드는Numeric 정확한 값으로 데이터를 그래프로 표시하고, 모드는PercentChange 첫 번째 데이터 포인트에 대한 변화율 변화로 데이터를 표시합니다. 기본 값은 모드입니다Numeric.
속성 외yAxisMode 에도, 컨트롤은IgrFinancialChart xxAxisMode 축에 대한 모드와 를 제공하는Time 속성을 가지고Ordinal 있습니다. 이 모드는Time 데이터 공백(예: 주말이나 공휴일에 주식 거래 없음)을 위해 x축 방향에 공간을 렌더링합니다. 이 모드는Ordinal 데이터가 존재하지 않는 날짜 지역을 통합합니다. 기본 값은 모드입니다Ordinal.
Axis Gap Example
The xAxisGap property of the React charts, determines the amount of space between columns or bars of plotted series. This property accepts a numeric value between 0.0 and 1.0. The value represents a relative width of the gap out of the available number of pixels between the series. Setting this property to 0 would mean there is no gap rendered between the series, and setting it 1 would render the maximum available gap.
The xAxisMaximumGap property of the React charts, determines the maximum gap value to allow. This default is set to 1.0 but can be changed depending on what you set xAxisGap to.
The xAxisMinimumGapSize property of the React charts, determines the minimum amount of pixels to use for the gap between the categories, if possible.
다음 예시는 뉴욕시 센트럴파크의 평균 최고 기온(섭씨)을 초기에는 1로 설정한 기둥 차트xAxisGap으로 나타내며, 따라서 열 사이에 전체 범주의 너비가 존재합니다. 이 예시에는 간격을 설정할 수 있는 슬라이더가 있어서 각 값이 어떤 역할을 하는지 볼 수 있습니다.
Axis Overlap Example
The xAxisOverlap property of the React charts, allows setting the overlap of the rendered columns or bars of plotted series. This property accepts a numeric value between -1.0 and 1.0. The value represents a relative overlap out of the available number of pixels dedicated to each series. Setting this property to a negative value (down to -1.0) results in the categories being pushed away from each other, producing a gap between themselves. Conversely, setting this property to a positive value (up to 1.0) results in the categories overlapping each other. A value of 1 directs the chart to render the categories on top of each other.
다음 예시는 전 세계에서 가장 높은 흥행 수익을 올린 영화 프랜차이즈와 시리즈 내 최고 흥행 영화를 비교한 것으로, 기둥 차트xAxisOverlap 초반 1로 설정되어 있어 두 열이 완전히 겹칩니다. 이 예시에는 겹침을 설정할 수 있는 슬라이더가 있어서 각 값들이 어떤 역할을 하는지 볼 수 있습니다.
Additional Resources
다음 항목에서 관련 차트 기능에 대한 자세한 내용을 확인할 수 있습니다.
API References
다음은 위 섹션에서 언급된 API 멤버 목록입니다.