여기서는 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 데모를 실행하십시오.