[펌]MSchart 구현, 기본.

출처:http://pillblog.tistory.com/ 

 

언젠가부터 MS에서 고맙게도 상용컴포넌트에 맞먹는 기능을 가진 MSChart라는 놈을 제공하기 시작했다.

아직 국내에서 이렇다할 자료를 찾기 힘들어 문서를 번역하여 포스팅하려 했지만, 어쩌다보니 기초는 잠시 건너뛰고 실시간 그래프를 먼저 포스팅하게 되었다.

 

-MS Chart 설치는?-

MSChart(Microsoft Chart Controls for Microsoft .NET Framwork 3.5), 실행파일은 1.76MB로 설치하는데 그닥 시간이 걸리진 않는다.

단, .NET Framework 3.5SP1 이상이 설치되어 있어야 하며, 아래 사이트에서 다운로드 받을수 있다.

http://www.microsoft.com/downloads/details.aspx?FamilyId=130F7986-BF49-4FE5-9CA8-910AE6EA442C&displaylang=en

자세한 내용은 구글링을 통해...ㅡ.ㅡ;

-허접 설치설명 끝.-

 

우선 시작전에 이 포스팅의 전신인 사이트가 있어 주소를 링크해두도록 하겠으며,

블로그의 주인이신 박필님께 감사의 말씀을 드린다.(사실 전신이 훨씬 좋다.. 난 내용만 줄였을 뿐이니..ㅡ.ㅡ;;)

http://pillblog.tistory.com/entry/C-MSChart-MS%EC%B0%A8%ED%8A%B8-TEST-Project

아, 참고로 박필님께서 남겨두신 자료는 스레드를 사용하고, 지금부터 포스팅하는 내용은 타이머를 사용함이 다르다.(초보자를 위한 기초..기초..^^ㅋ)

 

MS Chart AddOn이 설치되었다면 비주얼스튜디오에 아래 좌측 그림과 같은 컨트롤이 보일것이다.

일단 드래그하여 폼에 위치시키면 우측과 같은 모양이 보일것이다.

 

 

그냥봐도 이뻐보인다. 하지만 움직여야하는데 막대는 좀 아니다.

챠트를 선택후 속성창에서 'Series' 속성의 '컬렉션 편집기'를 띄운다.

'ChartType'을 'Spline'으로 변경하자.

 

 

변경후 아래와 같이 변한것을 확인할 수 있다.

 

 

유려하게 움직일수 있는 둥근 선으로 변했다. 하지만 아직 마음에 들지 않는다. 그래프를 가득채우고 싶다..

'ChartAreas'의 '컬렉션 편집기'를 열어 'InnerPlotPosition'과 'Position' 값을 약간 변경하자.

 

 

 

 

이제 나름 화면이 가득차 보인다.

이젠 그래프를 그릴 타이머를 올려놓을 차례다. 모르는 사람은 없겠지만 타이머 컨트롤이다.ㅡ.ㅡ;

 

 

마지막으로 타이머를 제어할 버튼을 하나 더 올려놓는다.

폼위에 올려진 컨트롤들은 아래와 같다.

[버튼]

btnGo

[챠트]

chart1

[타이머]

timer1

 

이제 코드비하인드 페이지로 이동하자.

우선 using문을 하나 추가한다.

using System.Windows.Forms.DataVisualization.Charting;

 

전체 소스는 아래와 같다.

 

namespace MovingChart
{
public partial class Form1 : Form
{
private List<int> _valueList1;
public Form1()
{
InitializeComponent();
}
private void SetChart(){
chart1.ChartAreas[0].AxisX.IsStartedFromZero = true;
chart1.ChartAreas[0].AxisX.ScaleView.Zoomable = false;
chart1.ChartAreas[0].AxisX.ScaleView.SizeType = DateTimeIntervalType.Seconds;
chart1.ChartAreas[0].AxisX.IntervalAutoMode = IntervalAutoMode.FixedCount;
chart1.ChartAreas[0].AxisX.IntervalType = DateTimeIntervalType.Seconds;
chart1.ChartAreas[0].AxisX.Interval = 0;
chart1.ChartAreas[0].AxisY.Maximum = 100; //Y축의 높이

_valueList1 = new List<int>();
DateTime now = DateTime.Now;
chart1.ChartAreas[0].AxisX.Minimum = now.ToOADate();
chart1.ChartAreas[0].AxisX.Maximum = now.AddSeconds(60).ToOADate();
}

private void AddData()
{
//_valueList1.Add(System.DateTime.Now.Second);

_valueList1.Add(new Random().Next(0, 100));
DateTime now = DateTime.Now;

if (chart1.Series[0].Points.Count > 0)
{
while (chart1.Series[0].Points[0].XValue < now.AddSeconds(-60).ToOADate())
{
chart1.Series[0].Points.RemoveAt(0);
chart1.ChartAreas[0].AxisX.Minimum = chart1.Series[0].Points[0].XValue;
chart1.ChartAreas[0].AxisX.Maximum = now.AddSeconds(0).ToOADate();
}
}
chart1.Series[0].Points.AddXY(now.ToOADate(), _valueList1[_valueList1.Count - 1]);
chart1.Invalidate();
}

private void timer1_Tick(object sender, EventArgs e)
{
AddData();
}

private void btnGo_Click(object sender, EventArgs e)
{
if (timer1.Enabled)
{
timer1.Stop();
btnGo.Text = "GO";
}
else
{
SetChart();
timer1.Interval = 1000;
timer1.Start();
btnGo.Text = "STOP";
}
}
}
}

 

기술적인 설명은 없다. 기능적인 설명만 드리겠다.

우선 '_valueList1'은 챠트를 그릴 데이터를 보관하는 리스트이다.

함수는 4개가 존재하는데 챠트의 초기화를 담당하는 'SetChart()', 데이터를 만들고 챠트를 만들어주는 'AddData()',

버튼 이벤트인 'btnGo_Click()'과 타이머 이벤트인 'timer1_Tick()'이다.

이벤트를 제외하면 함수는 2개에 불과하다.

테스트용 프로그램이라 그래프를 그리거나 중지시킬수 있게 해뒀는데, X축이 시간축이기 때문에 이렇게 멈춰버리면 시간의 길이에 따라 문제가 발생한다.(인덱스 범위 에러)

따라서 실전에서 사용하려면 그래프를 중지시키지 말고 계속 시간에 따라 흐르도록 해두거나, X축의 값을 대체해야한다.

 

 

좌측은 'AddData()' 메서드에서 시간(초)을 Y축에 뿌려준 결과이고, 우측은 'Random()'을 이용하여 데이터를 뿌린 결과이다.