차트 축 사용자 정의 - 라벨, 그룹화, 스크롤링 등
페이지 정보
작성자 GrapeCity 작성일 2020-07-13 00:00 조회 9,204회 댓글 0건본문
관련링크
를 사용하여 차트의 축을 사용자 정의하는 데 필요한 일반적인 방법을 모두 살펴보겠습니다. FlexChart는 WinForms, WPF, UWP, Xamarin, ASP.NET MVC, Blazor(2020 v2 현재) 등에서 지원되는 크로스 플랫폼 .NET 컴포넌트입니다. 심지어 도 있습니다.
API를 사용하면 차트 축을 유연하게 사용자 정의할 수 있다는 점에서 플랫폼마다 대체로 동일합니다. 축의 라인 가시성, 레이블, 눈금 표시, 눈금선, 제목, 위치 등을 구성합니다. 또한 로그 축 눈금을 만들고, 동일한 눈금을 따라 여러 축을 추가하고, 축을 반전시키는 등의 작업도 가능합니다.
이 게시글에서는 다음 내용을 다룹니다.
차트 축 선 표시 또는 숨기기
축 제목 표시
겹쳐진 축 레이블 관리
엇갈린 축 레이블 표시(새로운 기능)
축 레이블 형식 지정
눈금 표시, 눈금선 및 간격 설정
계층 구조 축 그룹화 구성(새로운 기능)
축 눈금 변경
축 스크롤 막대 활성화(새로운 기능)
여러 축 그리기
차트 축 선 표시 또는 숨기기
FlexChart는 미니멀 디자인을 강조하는 현대적 스타일 트렌드에 따라 기본적으로 세로 축 선을 표시하지 않습니다. 이것은 어느 한 축의 AxisLine 속성을 true 또는 false로 설정하여 변경할 수 있습니다.
다음 코드 조각은 FlexChart에서 Y축이 표시되도록 만듭니다.
flexChart.AxisY.AxisLine = true;
그림 1 - 차트 축 선 숨기기
C# 차트 축 제목 표시
모든 차트 축은 제도되는 값을 명확히 하는 데 도움이 되는 제목에 따라 식별할 수 있습니다. FlexChart에서는 어느 한 축의 제목 속성을 설정하면 됩니다. TitleStyle 속성을 사용하여 제목의 글꼴과 색상을 사용자 정의할 수도 있습니다.
다음 코드 조각은 축 제목을 설정하고 스타일을 지정합니다.
flexChart.AxisX.Title = "Day of Week"; flexChart.AxisX.TitleStyle.StrokeColor = Color.Blue; flexChart.AxisY.Title = "Amount - In Dollars"; flexChart.AxisY.TitleStyle.StrokeColor = Color.Blue;
그림 2 - 축 제목 스타일 정의
축 레이블 겹침 관리
미니멀 디자인의 현대적인 차트를 디자인할 때 일반적으로 나타나는 문제는 데이터 손실입니다. 너무 많은 서수 축 레이블을 가진 차트인 경우에 그런 문제가 발생합니다. 일반적인 해결 방법은 데이터 가독성이 손실될 수 있는 겹치는 레이블을 숨기는 것입니다.
FlexChart는 어떤 경우에든 유연한 옵션을 제공하도록 설계되었습니다. FlexChart는 모든 레이블을 보여주고, 레이블을 회전시키며, 겹치는 레이블을 숨기고, 긴 레이블을 잘라내거나 겹쳐지게 하고, 심지어는 레이블을 엇갈리게 하여 가독성을 최대한 높인 차트를 만들 수 있습니다.
FlexChart에서 축의 OverlappingLabels 속성 및 StaggeredLines 속성을 설정하여 겹치는 축 레이블에 대한 동작을 구성합니다.
겹침 옵션에는 보이기, 자동(겹침 방지를 위해 숨기기), 잘라내기, WordWrap 등이 있습니다.
flexChart.AxisX.OverlappingLabels = OverlappingLabels.Show; flexChart.AxisX.StaggeredLines = 2;
그림 3 - 축 레이블 겹침 또는 엇갈림
뿐만 아니라 LabelAngle 속성을 설정하여 레이블을 회전시킬 수도 있습니다. FlexChart에는 LabelAngle 속성을 Double.NaN으로 설정하면 필요할 때 레이블을 회전시키는 똑똑한 기능이 기본 제공됩니다.
flexChart.AxisX.LabelAngle = Double.NaN;
그림 4 - 축 레이블 회전
축 레이블 형식 지정
축 레이블을 날짜, 통화, 백분율, 사용자 정의 형식 등 다양한 형식으로 표현할 수 있습니다. 이를 위해서는 축의 형식 속성에 .NET 표준 또는 사용자 정의 서식 문자열을 설정하면 됩니다. 다음 표는 FlexChart에서 사용할 수 있는 일반적인 축 서식 문자열을 보여줍니다.
원본 축 레이블 | 서식 문자열 | 결과 |
---|---|---|
1/1/2016 | "MMM-dd-yyyy" | Jan-01-2016 |
1/1/2016 | "MMMM d, yy" | January 1, 16 |
45000 | "c0" | $45,000 |
37 | "n2" | 37.00 |
0.987 | "p1" | 98.7% |
40000 | "#,K" | 40K |
40000000 | "#,,M" | 40M |
팁: 미니멀 디자인의 현대적인 차트를 만들려면 40조 디짓을 4,000만 디짓으로 표시하는 등과 같이 더 적은 디짓으로 긴 축 레이블을 표시하도록 서식 지정하는 방법을 고려하십시오.
다음 코드 조각은 몇 가지 예제를 보여줍니다.
flexChart.AxisX.Format = "MMM-dd-yyyy"; flexChart.AxisY.Format = "C0";
그림 5 - 날짜 축 레이블 서식 지정
눈금 표시, 눈금선 및 간격 설정
FlexChart를 사용하면 기본 눈금선과 보조 눈금선 및 눈금 표시와 같은 축 간격의 모든 요소를 구성할 수 있습니다. 다음 코드 조각은 이러한 여러 속성을 설정하는 방법을 보여줍니다.
flexChart.AxisY.MinorTickMarks = TickMark.Outside; flexChart.AxisY.MajorTickMarks = TickMark.Outside; flexChart.AxisY.MajorGrid = true; flexChart.AxisY.MinorGrid = false; flexChart.AxisY.MajorUnit = 5000; flexChart.AxisY.MinorUnit = 1000; flexChart.AxisY.MajorGridStyle.StrokeColor = Color.Red;
그림 6 - 축 눈금선 및 눈금 표시의 스타일 지정
계층 구조 축 그룹화 구성
축 레이블을 범주 또는 분기별로 시각적으로 구성하려면 축 그룹화를 활성화할 수 있습니다. FlexChart는 단순형부터 맞춤형까지 유연한 옵션을 지원합니다. 데이터 집합에 그룹화 필드가 이미 있는 경우에는 그룹화할 필드 이름에 축 GroupNames 속성을 설정하기만 하면 됩니다.
축에 하나 이상의 그룹 수준을 표시하려면 GroupNames 속성에 쉼표로 분리된 문자열을 지정합니다.
flexChart1.AxisX.GroupNames = "Continent";
그룹 간의 가로 선과 세로 선 표시를 사용자 정의하여 시각화를 더욱 보조하도록 할 수 있습니다.
그림 7 - 축 그룹화 구성
그 뿐만이 아닙니다! 축의 GroupItemsPath 속성을 지정하여 계층 구조 데이터를 사용할 수 있습니다. 또한 데이터 집합과 함께 작용하는 숫자 및 날짜에 대해 축 그룹화를 제공할 수도 있습니다.
숫자 및 날짜 축 그룹화를 제공할 수 있도록 FlexChart에는 사용자 정의 IAxisGroupProvider 인터페이스 및 몇 가지 샘플이 포함되어 있습니다.
이 을 확인하십시오.
그림 8 - 축소 가능한 축 그룹화 구성
축 눈금 변경
FlexChart를 사용하여 차트를 만들 때는 기본적으로 선형 축 눈금이 사용됩니다. 축 Min 및 Max 속성을 설정하여 축 범위를 제어할 수 있습니다. 또한 로그 눈금을 구성하여 데이터가 광범위하게 확산하는 경우 필요에 더욱 잘 맞도록 눈금을 사용자 정의할 수도 있습니다.
축의 LogBase 속성을 설정할 때 FlexChart는 로그 축을 사용합니다.
flexChart.AxisY.LogBase = 10;
그림 9 - 로그 축 만들기
축 스크롤 막대로 범위 스크롤 활성화
축 스크롤 막대를 사용하여 언제든지 축을 확장하고 차트를 확대할 수 있습니다. 축 스크롤 막대를 사용하면 더 많은 데이터가 더 작은 공간에 보이도록 만들 수도 있고, 개발자의 추가 코딩 없이 제도 영역에 데이터를 포함시킬 수도 있습니다. FlexChart에서는 코드 한 줄로 범위 축 스크롤 막대를 활성화할 수 있습니다.
범위 스크롤 막대는 표준 스크롤 막대보다 더 유용하여, 사용자는 축의 눈금을 조정하여 차트를 세부적으로 “확대”할 수 있습니다.
// WinForms code AxisScrollbar scrollbar = new C1.Win.Chart.Interaction.AxisScrollbar(flexChart.AxisX); //WPF and UWP code flexChart.AxisX.Scrollbar = new C1AxisScrollbar();
동영상 섹션....
그림 10 - 차트 축 스크롤 막대 추가
여러 축 그리기
때때로 필요한 경우 서로 다른 눈금을 여러 축 및 제도 유형과 혼합하여 아무리 복잡한 데이터 집합이라도 시각화할 수 있습니다.
FlexChart를 사용하면 서로 다른 차트 유형을 단일 제도 영역에 시각화할 수 있습니다. 플롯은 축을 공유할 수도 있고 각각 자체 축을 가질 수도 있습니다. Y축 2개로만 한정되지 않고, FlexChart에서는 아래 그림과 같이 X축 또는 Y축을 개수에 상관없이 얼마든지 표시할 수 있습니다.
그림 11 - 여러 Y축 추가
보조 축에 시리즈를 그리기 위해 AxisX 및 AxisY 속성을 새 축 개체로 정의할 수 있습니다. 그런 다음 축 위치 및 기타 속성을 설정하여 디스플레이를 사용자 정의하면 됩니다. 축이 시리즈에 할당되면 차트에 추가됩니다.
var yAxis2 = new Axis { AxisLine = false, Position = Position.Right, MajorGrid = false, MajorTickMarks = TickMark.None, Title = "Velocity – in m/sec", Format = "n0", }; var series = new Series { SeriesName = "Velocity", ChartType = ChartType.Line, Binding = "Velocity", AxisY = yAxis2, }; flexChart.Series.Add(series);
샘플 링크
| |
또는
댓글목록
등록된 댓글이 없습니다.