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