C1FlexPivot의 FlexChart 소개
페이지 정보
작성자 GrapeCity
작성일 2020-11-09 16:01 조회 5,485회
댓글 0건
본문
관련링크
이제 WinForms용 ComponentOne 에 통합된 차트는 를 사용하여 렌더링됩니다. FlexChart는 최신 디자인으로 바뀌었고 이전 버전에 사용된 레거시 C1Chart 컨트롤보다 더 강력합니다.
이 게시물에서는 FlexPivot의 새로운 차트 기능에 대해 설명하고 실제 데이터 분석 샘플을 소개합니다.
FlexPivot과 C1FlexPivot 비교
이전 버전과의 호환성을 지원하기 위해 이전 차트를 C1FlexPivot 컴포넌트에 그대로 두었습니다. 마지막 릴리스에서는 새 FlexChart를 사용하는 신규 FlexPivot 컨트롤을 소개했습니다.
FlexPivot을 구성하는 세 가지 주요 컴포넌트는 PivotPanel, PivotChart 및 PivotGrid입니다. C1FlexPivot 및 FlexPivot은 PivotChart 차트 작성 기능에 사용되는 컴포넌트가 서로 다릅니다. C1FlexPivot은 C1Chart 컨트롤을 기반으로 한 C1FlexPivotChart를 사용했습니다.
FlexChart가 FlexPivot에 제공하는 이점
FlexChart는 2016년부터ComponentOne .NET의 주력 차트 컴포넌트였습니다. 다음은 FlexChart의 몇 가지 장점입니다.
성능 향상을 위해 DirectX 렌더링 지원
데이터 크기와 관계없이 C1Chart보다 경량이며 더 빠르고 뛰어난 성능 제공
80개 이상의 차트 유형 지원
사용하기 쉬운 API로 더 간편하게 컨트롤 확장 및 사용자 정의 가능
FlexPivot이 FlexChart를 어떻게 사용하는지 알아보겠습니다. FlexPivot은 FlexChart를 기본 차트 컴포넌트로 사용하여 다음과 같은 기능을 제공합니다.
: 이 속성을 사용하면 FlexPivot은 렌더링할 레이블/데이터 요소가 많은 경우 축 스크롤 막대를 자동으로 표시합니다. 이 기능은 최신 방법으로 차트를 스크롤하여 선택한 데이터 범위를 구체적으로 분석합니다.
: FlexPivot에는 데이터 계열을 렌더링할 때 사용할 수 있는 색 구성표 집합이 있습니다. 색 구성표는 설정하기 쉬운 최신 기능입니다.
FlexChart와 직접 연동할 수 있는 유연성: FlexPivotChart는 차트 속성을 제공합니다. 따라서 추가 차트 사용자 정의가 가능합니다.
사용 사례 - 전 세계 COVID-19 데이터 분석
리서치 및 데이터 발행 기관에서 전 세계 COVID-19 통계를 발표해야 하는 시나리오를 살펴보겠습니다. 이 예제에서는 기관이 동적 데이터 분석 및 데이터 시각화를 사용할 수 있는 도구가 필요합니다.
그뿐만 아니라 COVID-19 데이터가 특정 시간 프레임의 날짜마다 제시되므로 데이터 요소가 많아집니다. 사용자가 확대할 영역을 선택하여 세부적 수준에서 데이터를 분석할 수 있도록 컨트롤에서 런타임 상호 작용이 가능해야 합니다.
FlexPivot과 FlexChart는 이 예제에 사용할 수 있습니다. 아래 이미지는 전 세계 COVID-19 통계를 나타냅니다.
여기서 차트의 각 데이터 요소는 다음 COVID-19 데이터 요소 중 하나를 나타냅니다.
특정 날짜 기준으로 보고된 COVID-19 신규 확진자 수
특정 날짜 기준으로 보고된 COVID-19 감염으로 인한 신규 사망자 수
특정 날짜까지 보고된 COVID-19 총 확진자 수
특정 날짜까지 보고된 COVID-19 감염으로 인한 총 사망자 수
구현 내용을 다음과 같이 구분합니다.
FlexPivot을 데이터 소스에 바인딩
FlexPivot에서 차트 참조
FlexChart 사용자 정의
FlexPivot 바인딩
FlexPivot 바인딩은 간단합니다. DataSource에 속성을 설정하기만 하면 됩니다. FlexPivot을 사용하여 실시간 데이터를 시각화하기가 얼마나 쉬운지 보여 주기 위해 에서 가져온 ‘COVID-19 정보’에 대한 데이터를 표시해 보겠습니다. 고려할 데이터에는 다음 시간 범위에 대한 정보가 포함됩니다. 2019년 12월 31일 - 2020년 5월 31일.
이 데이터를 FlexPivot에 반영하려면 피벗을 바인딩할 수 있는 데이터 청사진이 있어야 합니다. 이를 위해 다음과 같은 클래스를 만들겠습니다.
public class CovidData
{
public DateTime Date { get; set; }
public double TotalCases { get; set; }
public double TotalDeaths { get; set; }
public double NewCases { get; set; }
public double NewDeaths { get; set; }
}데이터 청사진을 만들었으면 이제 FlexPivot을 바인딩하고 필드를 다음 RowValues 및 ValueFields에 추가할 수 있습니다.
var data = DataLoader.Import(countryName);
flexPivotPage.DataSource = data;
flexPivotPage.FlexPivotEngine.RowFields.Add("Date");
flexPivotPage.FlexPivotEngine.ValueFields.Add("TotalCases");
flexPivotPage.FlexPivotEngine.ValueFields.Add("NewCases");
flexPivotPage.FlexPivotEngine.ValueFields.Add("TotalDeaths");
flexPivotPage.FlexPivotEngine.ValueFields.Add("NewDeaths");다음 이미지는 이 단계를 완료한 후 FlexPivot에 로드된 데이터를 보여 줍니다.
차트는 각 날짜의 총 확진자 수, 총 사망자 수, 신규 확진자 수, 신규 확진자 수 등 COVID-19 통계를 렌더링합니다.
데이터 집합이 크기 때문에 데이터 요소 변경 내용은 매우 작아 보입니다. 따라서 다음 섹션에서는 차트를 사용자 정의하여 효과적인 시각화를 만드는 방법에 대해 알아보겠습니다.
FlexPivot에서 차트 참조
사용자가 데이터를 더 유용하게 사용하려면 FlexPivot에서 기본 FlexChart 차트 컴포넌트에 액세스한 다음 사용자 정의해야 합니다.
다음과 같이 FlexPivot에서 FlexPivotChart.Chart 속성을 통해 FlexChart에 액세스할 수 있습니다.
var flexChart = flexPivotPage.FlexPivotChart.Chart as FlexChart;
FlexChart 사용자 정의
FlexChart에 대한 액세스 권한이 있으면 FlexPivot에서 풍부한 기능을 이용하고 차트 출력을 사용자 정의할 수 있습니다.
다음 섹션에서는 FlexChart 기능을 구현하는 방법을 보여 줍니다.
복합 차트
데이터 프레젠테이션을 개선하기 위해 다양한 차트 유형으로 COVID-19 매개 변수를 렌더링합니다.
C1FlexPivot을 사용하는 경우, C1Chart에서는 두 가지 ChartGroups만 사용할 수 있으므로 두 가지 차트 유형만 표시할 수 있습니다. 반면에 FlexPivot의 경우에는 차트 유형을 지정하는 계열 개수가 제한되지 않습니다.
계열에 액세스하여 차트 유형을 변경하려면 다음과 같이 계열 컬렉션의 CollectionChanged 이벤트를 사용합니다.
// gets FlexChart's Series collection
var seriesColl = flexChart.Series as ObservableCollection<Series>;
seriesColl.CollectionChanged += SeriesColl_CollectionChanged;
private void SeriesColl_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
{
// handles only if a Series is added to FlexChart
if (e.Action == System.Collections.Specialized.NotifyCollectionChangedAction.Add)
{
var series = e.NewItems[e.NewItems.Count - 1] as Series;
if (series == null)
return;
switch (series.Name)
{
case "TotalCases":
series.ChartType = C1.Chart.ChartType.Line;
break;
case "NewCases":
series.ChartType = C1.Chart.ChartType.Step;
break;
case "TotalDeaths":
series.ChartType = C1.Chart.ChartType.Column;
break;
case "NewDeaths":
series.ChartType = C1.Chart.ChartType.Column;
break;
}
}
}
여러 보조 축
COVID-19 매개 변수의 값은 다양합니다. 예를 들어, 5월 18일의 COVID-19 신규 확진자 수는 81,217명인 반면 총 확진자 수는 4,679,764명입니다. 한 플롯 영역에서 여러 계열을 시각화하는 경우, 더 작은 값을 포함한 ‘NewCases’ 계열은 ‘TotalCases’를 기준으로 할 때 중요하지 않게 됩니다. 따라서 각 계열에 축을 추가해야 합니다.
C1Chart를 사용하면 최대 3개의 축을 그릴 수 있습니다. 그러나 FlexChart를 사용하면 보조 축에 하나 이상의 데이터 계열을 그릴 수 있습니다. 각 계열에 대한 축을 추가하기 위해 다시 CollectionChanged 이벤트를 사용하고 AxisY 속성을 설정하면 위 코드는 다음과 같은 모양이 됩니다.
private void SeriesColl_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
{
// handles only if a Series is added to FlexChart
if (e.Action == System.Collections.Specialized.NotifyCollectionChangedAction.Add)
{
var series = e.NewItems[e.NewItems.Count - 1] as Series;
if (series == null)
return;
switch (series.Name)
{
case "TotalCases":
series.ChartType = C1.Chart.ChartType.Line;
series.AxisY = new Axis()
{
AxisLine = true,
Position = C1.Chart.Position.Left,
Title = "Total patients diagnosed +ve with COVID-19",
Format = "0,0"
};
break;
case "NewCases":
series.ChartType = C1.Chart.ChartType.Step;
series.AxisY = new Axis()
{
Position = C1.Chart.Position.Left,
AxisLine = true,
Title = "Daily new patients diagnosed +ve with COVID-19"
};
break;
case "TotalDeaths":
series.ChartType = C1.Chart.ChartType.Column;
series.AxisY = new Axis()
{
AxisLine = true,
Position = C1.Chart.Position.Right,
Title = "Total deaths due to COVID-19",
Format = "0,0"
};
break;
case "NewDeaths":
series.ChartType = C1.Chart.ChartType.Column;
series.AxisY = new Axis()
{
Position = C1.Chart.Position.Right,
AxisLine = true,
Title = "New deaths due to COVID-19"
};
break;
}
}
}
축 스크롤 막대
이 문서에 사용된 데이터 집합은 2019년 12월 31일부터 2020년 5월 31일까지 각 날짜의 COVID-19 정보를 포함하고 있습니다. 데이터가 커지면 각 데이터 요소에 대해 렌더링된 요소는 점점 더 작아져서 이해하기 어려워집니다.
FlexChart를 사용하면 보기에서 데이터 요소 범위를 축소하는 스크롤 막대를 노출하여 이 문제를 해결할 수 있습니다. FlexPivot은 렌더링할 레이블/데이터 요소 수가 커지면 축 스크롤 막대를 자동으로 표시하는 FlexPivotChart.UseAxisScrollbar 속성을 노출하여 이 기능을 확장합니다. 보기에서 스크롤 막대를 사용하여 데이터를 증가/감소시켜 보십시오.
flexPivotPage.FlexPivotChart.UseAxisScrollbar = true;
확대/축소
관찰하는 데이터의 범위는 데이터 요소 몇십 개부터 몇천 개까지 가능합니다. 데이터 요소가 많은 경우에는 확대/축소 기능을 사용하는 것이 좋습니다.
FlexChart에서 확대/축소 기능을 사용하도록 설정하려면 MouseDown, MouseUp 및 MouseMove 이벤트를 사용해야 합니다.
Point _start, _last;
bool _IsMouseDown;
private void FlexChart_MouseUp(object sender, MouseEventArgs e)
{
var flexChart = sender as FlexChart;
// resets zooming in FlexChart
if(e.Button== MouseButtons.Right)
{
flexChart.AxisX.Min = flexChart.AxisX.Max = double.NaN;
flexChart.AxisY.Min = flexChart.AxisY.Max = double.NaN;
}
// stops Zooming
_IsMouseDown = false;
if (!_last.IsEmpty)
{
var start = flexChart.PointToData(_start);
var last = flexChart.PointToData(_last);
// updates axes with new limits
flexChart.AxisX.Min = Math.Min(start.X, last.X);
flexChart.AxisX.Max = Math.Max(start.X, last.X);
flexChart.AxisY.Min = Math.Min(start.Y, last.Y);
flexChart.AxisY.Max = Math.Max(start.Y, last.Y);
}
// clean up
_start = _last = Point.Empty;
}
private void FlexChart_MouseDown(object sender, MouseEventArgs e)
{
var flexChart = sender as FlexChart;
// starts Zooming
_IsMouseDown = true;
_start = e.Location;
_last = Point.Empty;
}
private void Chart_MouseMove(object sender, MouseEventArgs e)
{
var flexChart = sender as FlexChart;
// when zooming, update selection range
if (_IsMouseDown)
{
var ptCurrent = e.Location;
var left = (int)flexChart.PlotRect.Left;
var right = (int)flexChart.PlotRect.Right;
var top = (int)flexChart.PlotRect.Top;
var bot = (int)flexChart.PlotRect.Bottom;
ptCurrent.X = ptCurrent.X < left ? left : ptCurrent.X > right ? right : ptCurrent.X;
ptCurrent.Y = ptCurrent.Y < top ? top : ptCurrent.Y > bot ? bot : ptCurrent.Y;
_last = ptCurrent;
flexChart.Refresh();
}
}
범례 토글
FlexChart에서는 특정 계열만 사용하도록 설정하고 나머지는 사용하지 않도록 설정하여 특정 COVID-19 매개 변수에 집중할 수도 있습니다. 이를 위해서는 LegendToggle 속성을 true로 설정하면 됩니다.
flexChart.LegendToggle = true;
여기서는 ‘TotalDeaths’ 및 ‘TotalCases’ 계열이 사용하지 않도록 설정되었으므로 해당 데이터는 더 이상 차트에서 보이지 않게 됩니다.
선택 모드
FlexChart에서는 기본적으로 선택이 지원됩니다. 선택 모드를 활성화하면 사용자는 선택한 COVID-19 매개 변수를 다른 매개 변수와 구분하고 선택한 매개 변수와 관련된 정보를 표시할 수 있습니다.
예를 들어 사용자가 데이터 요소를 선택할 때 모든 COVID-19 매개 변수의 정보가 도구 설명으로 표시되도록 하려는 경우, 선택한 데이터 요소에 대한 정보에 액세스할 수 있습니다.
이를 위해 다음과 같이 FlexChart의 MouseDown 및 MouseMove 이벤트를 사용해 보겠습니다.
flexChart.SelectionMode = ChartSelectionMode.Point;
private void FlexChart_MouseDown(object sender, MouseEventArgs e)
{
var flexChart = sender as FlexChart;
var hitTestInfo = flexChart.HitTest(e.Location);
if (hitTestInfo == null || hitTestInfo.Item == null)
return;
if (hitTestInfo.ChartElement == ChartElement.PlotArea)
{
_selectedLocation = e.Location;
}
}
private void Chart_MouseMove(object sender, MouseEventArgs e)
{
var flexChart = sender as FlexChart;
// get details for selected element
CovidData selectedData = (((flexChart.Parent as FlexPivotChart).DataSource as C1FlexPivotPanel).DataSource as List<CovidData>).OrderBy(c => c.TotalCases).ToList()[flexChart.SelectedIndex] as CovidData;
if (selectedData != null)
{
var tooltipTemplate = @"**Date: {0}" + Environment.NewLine + "**Total Cases: {1}" + Environment.NewLine + "**Total Deaths: {2}" + Environment.NewLine + "**New Cases: {3}" + Environment.NewLine + "**New Deaths: {4}";
var tooltipContent = String.Format(tooltipTemplate, selectedData.Date.ToLongDateString(), selectedData.TotalCases, selectedData.TotalDeaths, selectedData.NewCases, selectedData.NewDeaths);
flexChart.ToolTip.Content = tooltipContent;
}
}
여기서 데이터 요소를 선택하면 모든 COVID-19 매개 변수에 대한 정보가 도구 설명으로 표시됩니다.
차트 팔레트
FlexPivot에는 사용하기 쉬운 여러 차트 팔레트가 제공됩니다. 팔레트 속성을 설정하여 다음을 선택했습니다.
flexPivotPage.Palette = Palette.Darkly;
위 이미지는 ‘Darkly’ 팔레트를 선택한 FlexPivot 차트 ‘FlexChart’를 보여 줍니다. 위 차트에서 여러 보조 축, 다양한 차트 유형, 사용자 정의된 도구 설명 정보, 특정 날짜 범위 스크롤 및 확대/축소 기능 등을 사용하여 COVID-19 정보를 더 쉽게 그리고 이해할 수 있습니다.
GrapeCity는 FlexPivot에서 차트 유형 및 기능을 더 추가하여 FlexChart 지원을 확장할 계획입니다.
FlexChart의 이점
FlexChart가 포함됨으로써 FlexPivot 컨트롤에 많은 이점이 추가됩니다. 사용자는 여러 보조 축, 확대/축소, 큰 데이터 집합을 포함한 스크롤 막대 기능, 복합 차트, 범례별 선택적 토글을 통해 데이터를 볼 수 있는 기능, 도구 설명 향상 등의 기능을 사용할 수 있게 됩니다.
GrapeCity 개발 팀은 향후 릴리스에서 추가 FlexChart 기능 지원을 추가할 계획입니다.
댓글목록
등록된 댓글이 없습니다.
