Web Components 축 옵션
모든 Ignite UI for Web Components 차트에서 좌표축은 제목, 레이블, 범위와 같은 시각적 구성을 위한 속성을 제공합니다. 이러한 기능은 아래 제공된 예에 설명되어 있습니다.
Axis Titles Example
Web Components 차트의 축 제목 기능을 사용하면 차트에 컨텍스트 정보를 추가할 수 있습니다. 축 제목의 모양과 느낌은 다양한 글꼴 스타일, 색, 여백 및 정렬을 적용하는 등 다양한 방법으로 사용자 지정할 수 있습니다.
Axis Labels Example
Web Components Charts를 사용하면 차트의 축에 표시되는 레이블의 글꼴을 구성, 서식 지정 및 스타일링할 수 있습니다. 회전 각도, 여백, 수평 및 수직 정렬, 색상, 패딩 및 축 레이블의 가시성을 변경할 수 있습니다. 다음 예제에서는 축의 이러한 기능을 사용하는 방법을 보여 줍니다.
Axis Labels Management & Formatting
차트의 축에는 소유 축의 레이블에 사용할 수 있는 공간의 양에 관해 향상된 계산을 수행하는 기능이 있습니다. 이 향상된 계산을 통해 축은 주어진 축에 대해 더 많은 레이블을 표시하기 위해 주어진 공간의 양을 최적화할 수 있습니다.
이 향상된 계산은 속성을 true로 설정useEnhancedIntervalManagement 하면 선택해야 하는 사항입니다. 그리고 축의 속성을 수동으로 설정interval 하지 않고 축의 치수에 들어갈 수 있는 만큼 라벨을 표시하고 싶다면, 축의 속성을 true로 설정할enhancedIntervalPreferMoreCategoryLabels 수 있습니다.
차트는 또한 라벨이 할당된 공간에 맞지 않을 경우 자동 회전을 고려할 수 있으며, 라벨이 맞는지 확인하기 위해 그래프 영역에 자동 여백을 적용할 수 있습니다. 이 기능은 차트상의autoMarginAndAngleUpdateMode 속성을 먼저 또는 중 하나SizeChangingSizeChangingAndZoom로 설정함으로써 처음에 선택할 수 있는 것입니다. 이 방법은 원한다면 라벨에 적용한 자동 여진과 각도를 언제 재평가해야 하는지 차트에 알려줍니다.
를autoMarginAndAngleUpdateMode 설정한 후, 속성을 true로 설정shouldAutoExpandMarginForInitialLabels 하면 자동 마진에 참여하거나 자동 회전을 위해 속성을 true로 설정할shouldConsiderAutoRotationForInitialLabels 수 있습니다. 또한 자동 여백을 추가로 설정하여autoExpandMarginExtraPaddingautoExpandMarginMaximumValue 추가 공간이나 최대 여백을 각각 설정할 수 있습니다.
와IgcNumberFormatSpecifier 같은IgcDateTimeFormatSpecifier 맞춤형 라벨 형식은 와XAxisLabelFormatSpecifier 컬렉션을 통해YAxisLabelFormatSpecifier 각 축에 추가할 수 있습니다. Intl.NumberFormat 및 Intl.DateTimeFormat 언어 민감 숫자, 날짜 및 시간 포맷 적용에 일반적으로 사용됩니다. 라벨에 사용자 지정 형식을 적용하려면,yAxisLabelFormat 또는xAxisLabelFormat가 데이터 항목의 속성 이름IgcCategoryChartComponent으로 설정되어야 합니다. 예를 들어,{Date} 숫자IgcFinancialChartComponent는 숫자 축을 사용하기 때문에 문맥 역할을 하므로 이 값을 설정해야 합니다.{0}
The following example formats the yAxis with a IgcNumberFormatSpecifier to reprerent $USD prices for top box office movies in the United States.
Axis Range Example
Web Components 차트에서는 숫자 축이나 시간축의 범위 최소값과 범위 최대값을 정의할 수 있습니다. 거리 최소값은 축의 가장 낮은 값이고, 거리 최대값은 축의 가장 높은 값입니다. 이 기능은 와yAxisMinimumValue 옵션을 설정yAxisMaximumValue 하여 설정합니다.
기본적으로 차트는 데이터 내 가장 낮고 높은 값 포인트를 기준으로 수치 축과 시간축 범위의 최소값과 최대값을 계산하지만, 이 자동 계산이 모든 경우 데이터 포인트에 적합하지는 않을 수 있습니다. 예를 들어, 데이터 최소 값이 850이라면, 축yAxisMinimumValue 최소값과 가장 낮은 데이터 포인트 사이에 공간 값이 50이 되도록 를 800으로 설정하고 싶을 수 있습니다. 같은 개념은 축의 최소값과 데이터 포인트의 최대 값에도 적용할 수 있습니다.yAxisMaximumValue
Axis Modes & Scale
IgcFinancialChartComponent그리고IgcCategoryChartComponent 컨트롤에서 속성이yAxisIsLogarithmic 참으로 설정되었을 때 y축을 따라 로그 스케일로 데이터를 그릴지, 이 속성이 기본값인 false로 설정되었을 때 선형 스케일로 표시할지 선택할 수 있습니다. 이yAxisLogarithmBase 속성을 사용하면 로그 스케일의 기본 값인 10에서 다른 정수 값을 바꿀 수 있습니다.
와 컨트롤은IgcFinancialChartComponent 제공yAxisMode와Numeric 모드를 사용하여PercentChange y축을 따라 데이터를 어떻게 표현할지 선택할 수 있게 해줍니다. 모드는Numeric 정확한 값으로 데이터를 그래프로 표시하고, 모드는PercentChange 첫 번째 데이터 포인트에 대한 변화율 변화로 데이터를 표시합니다. 기본 값은 모드입니다Numeric.
속성 외yAxisMode 에도, 컨트롤은IgcFinancialChartComponent xxAxisMode 축에 대한 모드와 를 제공하는Time 속성을 가지고Ordinal 있습니다. 이 모드는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 가능하다면 범주 간 간격을 위해 사용할 최소 픽셀 수를 결정합니다.
다음 예시는 뉴욕시 센트럴파크의 평균 최고 기온(섭씨)을 초기에는 1로 설정한 기둥 차트xAxisGap으로 나타내며, 따라서 열 사이에 전체 범주의 너비가 존재합니다. 이 예시에는 간격을 설정할 수 있는 슬라이더가 있어서 각 값이 어떤 역할을 하는지 볼 수 있습니다.
Axis Overlap Example
Web Components 차트의 특성 덕분에xAxisOverlap 플롯된 연속의 렌더링된 열이나 막대의 겹침을 설정할 수 있습니다. 이 속성은 -1.0에서 1.0 사이의 수치값을 받아들입니다. 이 값은 각 시리즈에 할당된 픽셀 수의 상대적 겹침을 나타냅니다. 이 속성을 음수(-1.0까지 낮춤)로 설정하면 범주들이 서로 멀어져 서로 간극이 생깁니다. 반대로 이 성질을 양수(최대 1.0)로 설정하면 범주들이 서로 겹치게 됩니다. 값이 1이면 차트가 카테고리들을 겹쳐 렌더링하도록 지시합니다.
다음 예시는 전 세계에서 가장 높은 흥행 수익을 올린 영화 프랜차이즈와 시리즈 내 최고 흥행 영화를 비교한 것으로, 기둥 차트xAxisOverlap 초반 1로 설정되어 있어 두 열이 완전히 겹칩니다. 이 예시에는 겹침을 설정할 수 있는 슬라이더가 있어서 각 값들이 어떤 역할을 하는지 볼 수 있습니다.
Additional Resources
다음 항목에서 관련 차트 기능에 대한 자세한 내용을 확인할 수 있습니다.
API References
다음은 위 섹션에서 언급된 API 멤버 목록입니다.