Angular 격자선
모든 Ignite UI for Angular 차트에는 X축과 Y축에 렌더링되는 축 선의 모양과 주요/보조 격자선 및 눈금 표시의 빈도를 수정하는 기본 기능이 포함되어 있습니다.
[!Note] the following examples can be applied to
IgxCategoryChartComponentas well asIgxFinancialChartComponentcontrols.
축 주요 눈금선은 축 레이블 위치에서 Y축을 따라 수평으로 또는 X축을 따라 수직으로 확장되는 긴 선이며 차트의 그림 영역을 통해 렌더링됩니다. 축 보조 격자선은 축 주요 격자선 사이에 렌더링되는 선입니다.
축 눈금은 Angular 차트의 모든 주요 선 위치에 있는 각 레이블의 모든 수평 및 수직 축을 따라 표시됩니다.
Angular Axis Gridlines Example
이 예에서는 지정된 간격으로 주요 격자선과 보조 격자선을 표시하도록 축 격자선을 구성하는 방법을 보여줍니다.
Angular Axis Gridlines Properties
축 간격 속성을 설정하면 주요 눈금선과 축 레이블이 축에 렌더링되는 빈도를 지정합니다. 마찬가지로 축 보조 간격 속성은 축에서 보조 격자선이 렌더링되는 빈도를 지정합니다.
마이너 격자선을 마이너 구간에 표시하려면 축에 속성을xAxisMinorStroke 설정xAxisMinorStrokeThickness 해야 합니다. 이는 마이너 격자선은 기본 색상이나 두께가 없으며, 먼저 지정하지 않으면 표시되지 않기 때문입니다.
다음 속성을 설정하여 Angular 차트에서 격자선이 표시되는 방식을 사용자 지정할 수 있습니다.
| 축 비주얼 | 유형 | 속성 이름 | 설명 |
|---|---|---|---|
| 주요 획 색상 | 끈 | xAxisMajorStroke yAxisMajorStroke |
이러한 속성은 축 주요 눈금선의 색상을 설정합니다. |
| 보조 획 색상 | 끈 | xAxisMinorStroke yAxisMinorStroke |
이러한 속성은 축 보조 격자선의 색상을 설정합니다. |
| 주요 스트로크 두께 | 숫자 | xAxisMajorStrokeThickness yAxisMajorStrokeThickness |
이러한 속성은 축 주요 격자선의 두께를 픽셀 단위로 설정합니다. |
| 작은 스트로크 두께 | 숫자 | xAxisMinorStrokeThickness yAxisMinorStrokeThickness |
이러한 속성은 축 보조 격자선의 두께를 픽셀 단위로 설정합니다. |
| 주요 간격 | 숫자 | xAxisInterval yAxisInterval |
이러한 속성은 축 주요 눈금선과 레이블 사이의 간격을 설정합니다. |
| 마이너 간격 | 숫자 | xAxisMinorInterval yAxisMinorInterval |
이러한 속성은 사용되는 경우 축 보조 격자선 사이의 간격을 설정합니다. |
| 축 선 획 색상 | 끈 | xAxisStroke yAxisStroke |
이 속성은 축 선의 색상을 설정합니다. |
| 축 스트로크 두께 | 숫자 | xAxisStrokeThickness yAxisStrokeThickness |
이러한 속성은 축 선의 두께를 픽셀 단위로 설정합니다. |
위 표의 주요 및 보조 간격과 관련하여 축 레이블의 주요 간격도 이 값으로 설정되어 간격과 관련된 축의 지점에 하나의 레이블이 표시된다는 점에 유의하는 것이 중요합니다. 보조 간격 눈금선은 항상 주요 눈금선 사이에 렌더링되므로 보조 간격 속성은 항상 주요 간격 속성 값보다 훨씬 작은 값(보통 2-5배 작은 값)으로 설정되어야 합니다.
범주 축에서 간격은 첫 번째 항목과 마지막 범주 항목 사이의 인덱스로 표시됩니다. 일반적으로 이 값은 모든 축 레이블이 다른 축 레이블에 의해 잘리지 않도록 모든 축 레이블이 축에 맞도록 주요 간격에 대한 총 범주 항목 수의 10-20%와 같아야 합니다. 작은 간격의 경우 이는 주요 간격 속성의 일부로 표시됩니다. 이 값은 일반적으로 0.25에서 0.5 사이여야 합니다.
숫자 축에서는 간격 값이 축 최소값과 축 최대 값 사이의 이중으로 표시됩니다. 기본적으로 숫자 축은 축 최소값과 최대값을 기반으로 근사하고 둥근 간격을 자동으로 계산하고 찾습니다.
날짜 시간 축에서 이 값은 축 최소값과 축 최대값 사이의 시간 범위로 표시됩니다.
다음 예에서는 위의 속성을 설정하여 눈금선을 사용자 정의하는 방법을 보여줍니다.
또한 의IgxDataChartComponent 축은 각각 와majorStrokeDashArray 속성을 활용하여minorStrokeDashArray 주요 격자선과 소격자 선에 대시 배열을 배치할 수 있습니다. 실제 축선은 해당 축의 속성을 설정strokeDashArray 하여 대시로 표시할 수도 있습니다. 이 특성들은 해당 격자선 대시 길이를 설명하는 숫자 배열을 사용합니다.
다음 예시는 위의 대시 배열 속성이 설정된 것을IgxDataChartComponent 보여줍니다:
Angular Axis Tickmarks Example
축 틱 표시는 와xAxisTickLength 속성을 0보다 큰 값으로 설정yAxisTickLength 하면 활성화됩니다. 이 특성들은 틱 마크를 형성하는 선분의 길이를 지정합니다.
틱 마크는 항상 축선에서 뻗어 있으며 라벨 방향을 가리킵니다. 라벨은 겹치지 않도록 틱마크 길이의 값에 따라 오프셋됩니다. 예를 들어, 속성이yAxisTickLength 5로 설정되면 축 라벨이 그 정도만큼 왼쪽으로 이동합니다.
다음 예에서는 위의 속성을 설정하여 눈금 표시를 사용자 정의하는 방법을 보여줍니다.
Angular Axis Tickmarks Properties
다음 속성을 설정하여 Angular 채팅에 축 눈금 표시가 표시되는 방식을 사용자 정의할 수 있습니다.
| 축 비주얼 | 유형 | 속성 이름 | 설명 |
|---|---|---|---|
| 틱 획 색상 | 끈 | xAxisTickStroke yAxisTickStroke |
이러한 속성은 눈금 표시의 색상을 설정합니다. |
| 눈금 스트로크 두께 | 숫자 | xAxisTickStrokeThickness yAxisTickStrokeThickness |
이러한 속성은 축 눈금 표시의 두께를 설정합니다. |
| 틱 스트로크 길이 | 숫자 | xAxisTickLength yAxisTickLength |
이러한 속성은 축 눈금 표시의 길이를 설정합니다. |
Additional Resources
다음 항목에서 관련 차트 기능에 대한 자세한 내용을 확인할 수 있습니다.
API References
다음은 위 섹션에서 언급된 API 멤버 목록입니다.
GitHub