[.Net] C# WinForm에서 ScottPlot으로 그래프, 차트 쉽게 사용하기

소개

프로그램을 개발하다 보면 꺾은선 그래프나 원형 차트와 같은 UI 컴포넌트가 필요한 경우가 있습니다. MFC에서는 꺾은선 그래프를 보여주기 위해 직접 GDI+로 개발한 경험이 있는데요. 솔직히 UI 컴포넌트를 직접 만들 수는 있지만, 여기에 시간을 투자하는 것은 비효율적이라 생각합니다. 이러다 메인 프로그램 개발 기간만 늘어나기 때문이죠.

그런데 이와 반대로 C#은 무료 UI 컴포넌트를 구하기가 아주 쉽습니다. 웬만한 건 Nuget에서 아주 쉽게 찾을 수 있기 때문이죠. 차트도 마찬가지입니다. ScottPlot 라이브러리는 누겟에서 설치하고 바로 사용이 가능합니다.

ScottPlot 데모. 출처: ScottPlot GitHub

ScottPlot 특징

• 무료로 사용이 가능(MIT License)
• Windows Forms, WPF 모두 지원
• 다양한 차트 지원(Bar, Bubble, Coxcomb, Curve, Finance, Pie, Polygon 등 다수)
• 마우스 및 키보드 상호 동작
• 사용자 편의를 위한 Demo Program과 Quick Start Cookbook을 제공하여 빠른 개발 가능

제가 사용해 보면서 느낀 장점들을 나열해 보았습니다. 아마 이 외에도 특징이 더 있을 텐데요. 위 특징 중 가장 중요한 점은 '무료'인 것과 'Demo Program' 및 'Quick Start Cookbook'이라 생각합니다. 이렇게나 좋은 차트 라이브러리를 무료로 제공했다는 점에 아주 놀라웠습니다. 게다가 사용자의 편의를 위해 모든 차트의 데모 프로그램과 Quick Start Cookbook을 제공하여 소스 예제도 쉽게 확인할 수 있습니다. 이렇게 너무나도 친절한 라이브러리는 정말 오랜만에 본 듯하네요.

ScottPlot Cookbook

https://scottplot.net/cookbook/4.1/

ScottPlot 4.1 Cookbook

ScottPlot 데모 프로그램으로 검토하기

아래 ScottPlot Demo 페이지에 접속합니다.

https://scottplot.net/demo/

ScottPlot Demo Application

위 사이트에 접속하면 아래와 같이 표시됩니다. 좌측의 Windows Forms 버튼을 클릭하여 데모 프로그램을 다운로드합니다.

데모 프로그램 다운로드 화면

다운로드한 압축 파일을 해제한 후 ScottPlot.Demo.WinForms.exe 파일을 실행합니다.

ScottPlot Demo 프로그램 실행 화면

Launch ScottPlot Cookbook 버튼을 클릭하면 아래와 같이 모든 Plot의 기능과 설명, 소스 코드가 표시됩니다. 원하는 플롯이 지원되는지, 지원된다면 어떤 동작을 예상하고 어떻게 사용하는지 미리 알 수 있습니다. 개발자가 정말 세심하게 신경 썼다는 것이 느껴집니다.

ScottPlot Cookbook Demo 화면

그 외의 Plot 버튼을 클릭하면, 직접 컨트롤하여 Plot의 동작을 확인할 수 있습니다.

Plot in a Scroll Viewer 동작 화면

WinForm에서 ScottPlot 준비하기

Windows Forms 앱(.NET Framework) 프로젝트를 ExamScottPlot 이름으로 생성합니다.

Windows Forms 앱 프로젝트 생성하기

NuGet에서 ScottPlot을 검색하고, ScottPlot.WinForms를 선택합니다.

NuGet에서 ScottPlot 검색 결과

설치할 프로젝트를 선택하고 설치 버튼을 클릭하여 설치합니다.

ScottPlot을 프로젝트에 설치하기

정상적으로 설치가 완료되면, 아래와 같이 프로젝트 참조에 ScottPlot과 ScottPlot.WinForms이 표시됩니다.

프로젝트 참조 dll

그리고 도구 상자에 아래와 같이 FormsPlot이라는 컴포넌트가 표시됩니다.

FormsPlot 컴포넌트

WinForm에서 Scatter Plot 만들기

컨트롤을 폼에 추가하면 아래와 같이 표시됩니다.

폼에 추가된 모습

ScottPlot demo 중 'Scatter Plot Quickstart'를 참고하여 생성해 보겠습니다. 아래에 표시한 소스 코드를 그대로 복사합니다.

Quick Start 코드 예시

코드는 아래와 같습니다.

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
using ScottPlot; //추가

namespace ExamScottPlot
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void btnInitialize_Click(object sender, EventArgs e)
        {
            int pointCount = 51;
            double[] x = DataGen.Consecutive(pointCount);
            double[] sin = DataGen.Sin(pointCount);
            double[] cos = DataGen.Cos(pointCount);

            scatterPlot.Plot.AddScatter(x, sin);
            scatterPlot.Plot.AddScatter(x, cos);

            scatterPlot.Refresh();
        }
    }
}

동작 결과를 볼까요? 데모 동작이랑 동일하게 움직입니다. 코드 내용도 아주 간단하죠? 51개의 X축 데이터와, X축에 대응되는 sin, cos 값을 double 배열로 받아넘겨만 주면 끝입니다.

Scatter Plot 예제

사용 방법이 참 간단하죠? 자세한 사용 방법은 아래 예제 코드를 참고하세요.

ExamScottPlot.zip

4.49MB