[C#] ScottPlot로 차트를 생성해보자

 안녕하세요. 진득코딩입니다. 이번 시간에는 NuGet으로 ScottPlot을 설치하여 여러 가지 차트를 생성해보고 ScottPlot에 대해서 살펴보도록 하겠습니다.

 NuGet

 NuGet은 .Net 용 앱스토어같은거라고 생각하시면 됩니다. NuGet을 이용하여 여러 가지 패키지를 설치하여 사용할 수 있습니다.

 NuGet을 사용하는 방법을 살펴보도록 하겠습니다. 프로젝트를 눌러서 나오는 Manage NuGet Packages를 클릭하면 위와 같은 창이 뜨게 됩니다.

 해당 창에서 왼쪽 상단에 찾아보기를 눌러서 검색 창에 ScottPlot라고 검색해서 ScottPlot 패키지를 검색합니다.

ScottPlot

 검색 결과로 나온 패키지 중에서 WPF용인 ScottPlot.WPF를 클릭해서 설치해줍니다.

 그 후 XMAL에 위에 두 코드를 입력하게 되면 ScottPlot를 사용할 수 있게 됩니다. 그럼 쿡북을 살펴보고 코드를 작성하면서 ScottPlot를 학습해보도록 하겠습니다.

공식 쿡북 살펴보기

 dataX와 dataY에 각각 x축과 y축의 데이터를 추가해줍니다. 그리고 WpfPlot1.Plot.Add.Scatter();를 통해 산점도를 추가합니다. 데이터가 추가되었기 때문에 Refresh();를 통해서 WpfPlot를 다시 그려줍니다.

 위 ScottPlot는 해당 그래프를 커스터마이징한 모습입니다. Color로 색을 입히고 LineWidth로 산점도의 선 두께를 설정해주고 MarkerSize로 데이터 포인트를 나타내는 마커의 크기를 설정해줍니다.

 sin과 cos은 간단하게 테스트하는데 도움을 주는 Generate의 도움을 받도록 하겠습니다. Generate로 생성한 데이터를 WpfPlot3에 넣어주면 위와 같은 그래프가 나타나게 됩니다.

 파형과 같은 데이터를 만들기 위해서 RandomWalk 함수를 사용하였습니다. RandomWalk()는 무작위로 결정된 각 단계의 값이 이전 단계의 값에 더해지거나 빼지는 방식으로 데이터를 생성하는 함수입니다. 또한 Tiltle 함수를 사용해서 해당 차트의 제목을 위에 작성해줄 수도 있습니다.

 XLabel과 YLabel을 사용하게 되면 x축과 y축의 라벨을 달아줄 수 있습니다.

 LegendText에 데이터를 할당해주고 ShowLegend() 함수를 사용하면 오른쪽 하단에 보이는 작은 박스를 생성할 수 있습니다. ScottPlot에서는 해당 박스를 Legend라고 지칭합니다.

 ScottPlot.Plottables.Arrow는 ScottPlot에서 화살표를 표현하는 클래스입니다. 해당 클래스를 불러서 Base와 Tip을 지정해주게 되는데 Base는 시작점을 뜻하고 Tip은 끝점을 나타내게 됩니다.

 Axes를 위와 같이 양쪽에 표현해줄 수도 있습니다. Left Axis와 Right Axis의 데이터를 각각 설정해줄 수도 있고 색상도 다르게 설정해줄 수 있습니다.

 해당 그래프는 ScottPlot에서 여러 개의 Y 축을 사용하는 다중 축 플롯을 만드는 방법을 보여줍니다. 위에 코드 네줄은 표의 default값을 설정해줍니다. 사인파를 생성해서 할당해주고 x축은 바닥에 위치하고 y축은 왼쪽에 위치하게 해줍니다. 그리고 왼쪽에 Primary Y Axis라는 라벨을 달아줍니다. 그리고 yAxis2에 두 번째 axis를 할당해줍니다. 그리고 cos 그래프도 추가해준 후에 YAxis에 yAxis2를 할당해줍니다. 마지막으로 yAxis2의 내용을 입력해주면 위와 같은 그래프를 만들 수 있습니다.

ScottPlot 실습해보기

 다음은 ScottPlot 공식 데모 소스 코드에서 적절한 예제를 찾아서 차트를 만드는 실습한 결과입니다. 한 차트에 여러 개의 Axis를 표시하는 기능, 격자가 없는 배경을 사용하는 기능, 차트 위에 말풍선(callout)을 띄우는 기능을 추가하였습니다.

생성자에서 점 좌표를 찍어서 이은 그래프와 사인, 코사인 그래프를 할당해주었습니다. 그리고 sig1의 Axes는 왼쪽에, sig2의 Axes는 오른쪽에 나오도록 하였습니다.

Callout이라는 말풍선을 두 개 만들어주었습니다. 각각 말풍선에 들어갈 내용, text의 위치, 화살표가 가리키는 위치를 지정해주었습니다.

 아까 할당해주었던 Axes들의 내용을 각각 넣어주고 색도 지정해주었습니다. HideGrid()를 사용하여 격자를 제거하였습니다. 위와 같이 할당도 많이하고 추가된 데이터들도 많기 때문에 Refresh()를 이용하여 그래프를 다시 그려주었습니다.

---

 이번 시간에는 ScottPlot라는 라이브러리를 설치하여 해당 메뉴얼을 보면서 적용해보았습니다. ScottPlot이라는 라이브러리로 시각적인 요소들을 표현할 때 굉장히 좋은 라이브러리라는 생각이 들었습니다. 이번 포스팅은 여기까지입니다. 끝까지 봐주셔서 감사합니다.😀