여기서는 FlexChart를 사용하여 차트의 축을 사용자 정의하는 데 필요한 일반적인 방법을 모두 살펴보겠습니다. FlexChart는 WinForms, WPF, UWP, Xamarin, ASP.NET MVC, Blazor(2020 v2 현재) 등에서 지원되는 크로스 플랫폼 .NET 컴포넌트입니다. 심지어 JavaScript 버전도 있습니다.

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에서 사용할 수 있는 일반적인 축 서식 문자열을 보여줍니다.

팁: 미니멀 디자인의 현대적인 차트를 만들려면 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 인터페이스 및 몇 가지 샘플이 포함되어 있습니다.

이 UWP 축 그룹화 샘플을 확인하십시오.

그림 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);
​

샘플 링크

이러한 기능이 모두 작동하는 것을 보려면 ChartAxis101 샘플을 다운로드하십시오. WinForms | UWP | WPF

또는 WinForms 또는 WPF Demo Explorer에서 FlexChartExplorer 데모를 실행하십시오.