[Xamarin.Forms] 차트 표현하기 (Syncfusion)

Xamarin.Forms에서 Chart를 표현하는 방법은 여러가지가 있습니다. 여기에서는 Syncfusion을 이용한 방법을 소개합니다.

SyncFusion 사용하기

• 특징: 강력하면서 아름다운 Chart를 표현할 수 있습니다. 다양한 추가 컨트롤을 이용할 수 있는 것은 덤입니다. 단 무겁고 로딩이 느린 것이 흠입니다.
  
• 무료 라이선스: 개인개발자, 5인 이하 소규모 사업장(연간 매출 백만달러 이하)인 경우 얻으실 수 있습니다. (라이선스 얻기)

사용방법

1. 여기서 무료 라이선스를 얻습니다. 무료 라이선스 대상이 아닌 경우 30일 Free Trial 라이선스가 있으니 참고바랍니다.
2. 무료 라이선스 요청이 완료되면, Synfusion 홈페이지에서 My account 페이지로 이동합니다.
   
3. My account 페이지 하단에 License and Keys를 클릭하시면 라이선스 키를 얻으실 수 있습니다.
   

Xamarin.Forms에서 Chart를 사용하는 방법은 Xamarin.Blog (Visualize Your Data with Charts, Graphs, and Xamarin.Forms)를 바탕으로 설명드리고자 합니다.

1. My account 페이지 하단의 Downloads 링크를 클릭합니다.
2. 최상단의 링크를 클릭합니다. (Service Packs은 패치파일로 버그수정, 기능추가가 포함됩니다. Service Packs은 나중에 받도록 합시다.)
   
3. 그러면 다운로드 페이지로 이동하는데 Xamarin 항목의 파일을 내려받습니다.
   
4. 내려받은 파일을 설치하고, 설치된 폴더로 이동합니다. 설치된 폴더의 예시는 아래와 같습니다.
   설치경로 예: C:\Program Files (x86)\Syncfusion\Essential Studio\15.3.0.26\lib
5. Syncfusion 설치폴더로 이동하면 dll 파일들을 보실 수 있습니다. 이 중에서 필요한 파일을 Xamarin 프로젝트에 추가해주면 됩니다. 컨트롤 별로 필요한 파일은 Syncfusion Help 문서를 참고해주세요.
   
6. 여기서는 Chart를 사용할 예정이므로 프로젝트 별로 다음 파일들을 References로 추가해주세요.
• Xamarin.Forms (PCL) :  lib/pcl/Syncfusion.SfChart.XForms.dll
• Xamarin.Android :
  
1. lib/android/Syncfusion.SfChart.Android.dll (Syncfusion 15.3 버전부터는 추가하면 오류가 나니 추가하지 마세요)
   
2. lib/android/Syncfusion.SfChart.XForms.dll
3. lib/android/Syncfusion.SfChart.XForms.Android.dll
• Xamarin.iOS :
1. lib/ios-unified/Syncfusion.SfChart.iOS.dll (Syncfusion 15.3 버전부터는 추가하면 오류가 나니 추가하지 마세요)
2. lib/ios-unified/Syncfusion.SfChart.XForms.dll
3. lib/ios-unified/Syncfusion.SfChart.XForms.iOS.dll
7. Xamarin.Android 프로젝트와 Xamarin.iOS 프로젝트에 초기화 코드를 추가해야 합니다. 각각 아래 코드를 추가해주세요.
• Xamarin.Android / MainActivity.cs
  

  protected override void OnCreate(Bundle bundle)
  {
      base.OnCreate(bundle);
      global::Xamarin.Forms.Forms.Init(this, bundle);
  
      //Forms.Init() 메서드 다음에 아래 코드 추가
      new Syncfusion.SfChart.XForms.Droid.SfChartRenderer();
  
      LoadApplication(new App());
  }

• Xamarin.iOS / AppDelegate.cs
  

  public override bool FinishedLaunching(UIApplication app, NSDictionary options)
  {
      global::Xamarin.Forms.Forms.Init();
      //Forms.Init() 다음에 아래코드 추가
      new Syncfusion.SfChart.XForms.iOS.Renderers.SfChartRenderer();
  
      LoadApplication(new App());
      return base.FinishedLaunching(app, options);
  }

8. 이제 준비가 끝났습니다. Xamarin.Forms Project에 Syncfusion 차트를 작성해보도록 합시다. 코드에 대한 상세한 설명은 주제에 벗어나므로 생략하겠습니다. (코드 설명, SyncfusionChart 설명, 프로젝트 전체 소스코드)
   
• xaml 파일
  

  <?xml version="1.0" encoding="utf-8" ?>
  <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
      x:Class="xfChartsSample.Views.SyncfusionChartPage"
      Title="Syncfusion Charts"
      xmlns:chart="clr-namespace:Syncfusion.SfChart.XForms;assembly=Syncfusion.SfChart.XForms">
      <ContentPage.Content>
          <Grid RowSpacing="5" ColumnSpacing="0">
              <Grid.RowDefinitions>
                  <RowDefinition Height="50" />
                  <RowDefinition Height="*" />
              </Grid.RowDefinitions>
              <Button Grid.Row="0" x:Name="btnUpdateChart" Text="값 변경" />
              <chart:SfChart Grid.Row="1" x:Name="Chart">
                  <chart:SfChart.PrimaryAxis>
                      <chart:CategoryAxis LabelRotationAngle="-45">
                          <chart:CategoryAxis.Title>
                              <chart:ChartAxisTitle Text="방문일"/>
                          </chart:CategoryAxis.Title>
                      </chart:CategoryAxis>
                  </chart:SfChart.PrimaryAxis>
                  <chart:SfChart.SecondaryAxis>
                      <chart:NumericalAxis>
                          <chart:NumericalAxis.Title>
                              <chart:ChartAxisTitle Text="방문자"/>
                          </chart:NumericalAxis.Title>
                      </chart:NumericalAxis>
                  </chart:SfChart.SecondaryAxis>
  
                  <chart:SfChart.Series>
                      <chart:StackingColumnSeries
                          ItemsSource="{Binding CheckInData}" 
                          XBindingPath="Date"
                          YBindingPath="CheckIns"
                          Label="체크인"
                          DataMarkerPosition="Center"
                          EnableDataPointSelection="True"
                          EnableAnimation="True"
                          AnimationDuration="1.0"
                          Color="#FF8D00">
                          <chart:StackingColumnSeries.DataMarker>
                              <chart:ChartDataMarker>
                                  <chart:ChartDataMarker.LabelStyle>
                                      <chart:DataMarkerLabelStyle LabelPosition="Center" />
                                  </chart:ChartDataMarker.LabelStyle>
                              </chart:ChartDataMarker>
                          </chart:StackingColumnSeries.DataMarker>
                      </chart:StackingColumnSeries>
                      <chart:StackingColumnSeries
                          ItemsSource="{Binding CheckInData}"
                          XBindingPath="Date"
                          YBindingPath="Guests"
                          Label="손님"
                          DataMarkerPosition="Center"
                          EnableDataPointSelection="False"
                          EnableAnimation="True"
                          AnimationDuration="1.0"
                          Color="#D32F2F"/>
                  </chart:SfChart.Series>
                  <chart:SfChart.Legend>
                      <chart:ChartLegend />
                  </chart:SfChart.Legend>
                  <chart:SfChart.ChartBehaviors>
                      <chart:ChartZoomPanBehavior EnablePanning="True" EnableDoubleTap="False" />
                  </chart:SfChart.ChartBehaviors>
              </chart:SfChart>
          </Grid>
      </ContentPage.Content>
  </ContentPage>
  

• xaml.cs 파일
  

  using System;
  using System.Collections.Generic;
  using System.Collections.ObjectModel;
  using System.Linq;
  using System.Text;
  using System.Threading.Tasks;
  using Xamarin.Forms;
  using Xamarin.Forms.Xaml;
  
  namespace xfChartsSample.Views
  {
      [XamlCompilation(XamlCompilationOptions.Compile)]
      public partial class SyncfusionChartPage : ContentPage
      {
          public SyncfusionChartPage()
          {
              InitializeComponent();
              BindingContext = new StatsViewModel();
  
              btnUpdateChart.Clicked += BtnUpdateChart_Clicked;
          }
  
          protected override void OnAppearing()
          {
              base.OnAppearing();
  
              //1. Chart 데이터 생성
              StatsViewModel vm = BindingContext as StatsViewModel;
              vm.GenerateData();
  
  
              //2. 차트 출력여부 결정
              if (vm.CheckInData.Count > 0)
              {
                  //Chart에서 표현해야할 데이터 양에 따라 차트 확대/축소
                  var max = Device.Idiom == TargetIdiom.Phone ? 7.0 : 16.0;
                  var factor = max / (double)vm.CheckInData.Count;
                  if (factor > 1.0)
                      factor = 1.0;
                  else if (factor < .1)
                      factor = .1;
                  Chart.PrimaryAxis.ZoomFactor = factor;
              }
              else
                  Chart.IsVisible = false;
          }
          private void BtnUpdateChart_Clicked(object sender, EventArgs e)
          {
              StatsViewModel vm = BindingContext as StatsViewModel;
              vm.GenerateData();
          }
      }
  
      //Chart 데이터
      public class DataPoint
      {
          public string Date { get; set; }
          public int CheckIns { get; set; } //체크인한 손님수
          public int Guests { get; set; } //방문자 수
      }
      //ViewModel
      public class StatsViewModel
      {
          private Random random = new Random((int)DateTime.Now.Ticks);
          public ObservableCollection<DataPoint> CheckInData { get; set; }
          public StatsViewModel()
          {
              CheckInData = new ObservableCollection<DataPoint>();
          }
          public void GenerateData()
          {
              //그래프 데이터 생성
              CheckInData.Clear();
  
              for (int i = -5; i < 0; i++)
              {
                  DataPoint dataPoint = new DataPoint();
                  dataPoint.Date = DateTime.Now.AddDays(i).ToString("yy-MM-dd");
                  dataPoint.Guests = random.Next(20, 100);
                  dataPoint.CheckIns = dataPoint.Guests - random.Next(0, 15);
                  CheckInData.Add(dataPoint);
              }
          }
      }
  }

9. 실행 결과