MFC에서 Chart를 쉽게 그리는 라이브러리 ChartDirector

 MFC에서 Chart를 하기위해서 라이브러리를 검색해보았습니다. MFC용 Chart 라이브러리가 있기는 합니다. C++기반의 라이브러리도 많지만 해당 라이브러리에서 MFC용도 제공하고 있었습니다.

Chart 라이브러리를 공유해둔 사이트를 겨우 찾았습니다. 그래서 공유합니다.

  http://blog.tcltk.co.kr/?p=962

2009년에 올려주신 자료이지만 8개 정도의 Chart를 간단하게 소개하고, 링크를 작성해두셔서 저에겐 큰 도움이 되었습니다.

해당 블로그에 올려주신 자료 중 저는 ChartDirector 라는 Chart 사용법을 소개하려고 합니다.

어렵지는 않으며 간단한 방법으로 샘플 차트를 실행 해 볼 수 있습니다.

 바형, 라인, 주식형 차트도 제공하고 있습니다. 이를 활용하여 간단하게 데이터 입력만으로도 이쁜 차트를 눈으로 확인 할 수 있었습니다.

ChartDirector 홈페이지

  http://www.advsofteng.com/index.html

해당 홈페이지로 접속하셔서 Chart Demo 및 문서를 다운 받을 수 있습니다.

ASP/COM/VB, .NET, JSP/Java, ColdFusion, PHP, Perl, Python, Ruby, C++의 라이브러리와 문서를 제공합니다.

저는 이 중 C++ 용을 이용하여 MFC에서 간단하게 차트를 그리는 방법을 소개하려고 합니다.

ChartDirector for C++ 다운로드

 홈페이지 접속하여 다운로드로 이동하여, 하단으로 이동합니다. Linux, Solaris, FreeBSD, Mac OS X 용도 다 따로 다운 받으 실 수 있습니다. MFC에서 사용하기 위해서는 Windows(32-bit) 또는 Windows(64-bit)를 다운 받으시면 됩니다.

 저는 이중 Windows (32-bit)용을 다운 받았습니다.

다운 받은 파일을 압축해제하면 아래와 같이 폴더 구성을 하고 있습니다.

 cppdemo - c++로 제작 된 chart 예제

 doc - 라이브러리 사용법이 들어있는 설명서

 include - Chart를 사용하기 위한 라이브러리 소스코드

 lib - 컴파일을 하기 위한 lib 파일과 실행을 위한 chartdir51.dll 파일이 포함되어 있습니다.

 mfcdemo - mfc로 제작 된 chart 예제

 qtdemo - qt로 제작 된 chart 예제

데모 실행

mfcdemo로 접속하여 mfcdemo.sln을 실행하면 MFC 예제를 바로 실행 해볼 수 있습니다.

mfcdemo.sln을 여는 방법을 모르시면 열어보세요.

버전이 다르기 때문에 Conversion을 해야 합니다. Next를 선택합니다.

아래와 같이 기본 값을 선택하고 Next합니다. (Backup을 해야 할 경우 Yes 입니다. 필요치는 않습니다.)

총 15개의 demo가 들어있습니다. 진행이 완료될 때까지 기다리시면 됩니다.

로그는 필요하시면 보시면 됩니다.

 아래와 같이 로그와 함께 데모파일이 실행되었습니다. 오른쪽 화면의 리스트에 프로젝트 15개가 보이게 됩니다. 기본 프로젝트는 mfcdemo 이기에 실행버튼을 클릭하시면 자동으로 mfcdemo가 실행됩니다.

 만약 mfcdemo 가 아닌 다른 프로젝트를 실행 하신다면 해당 프로젝트 오른쪽 마우스 클릭 후 Debug(디버그) -> Start new instance를 실행 하시면 됩니다.

실행 된 데모의 화면입니다.

 실시간 차트를 그리는 예제입니다. 데모이기에 랜덤 값을 이용하여 차트를 그리게 됩니다.

직접 예제 만들어보기

 Dialog based로 작성하고 Unicode libraries를 사용하는 걸로 하고 Finish를 합니다.

 진행상 순서가 뒤섞일 수 있습니다. 필요한 라이브러리를 미리 복사해 두셔야 작업하시는데 편리합니다.

]

준비사항 - 필수

 프로젝트가 생성되었으면 이제 필요한 라이브러리 파일들을 복사 해두어야 합니다. 압축을 해제한 폴더에 보시면 include, lib 폴더가 있습니다. 해당 폴더는 본인의 프로젝트명 아래에 아래와 같이 복사 해둡니다.

 제가 복사한 폴더는 프로젝트 폴더 아래에 소스코드가 있는 폴더에 복사하였습니다.

 그리고 진행을 빠르게 하기 위해서 ChartViewer.cpp와 ChartViewer.h 파일도 함께 복사합니다. 이 파일은 실제 chart를 화면에 보이게 하기 위한 라이브러리라고 생각하시면 됩니다. 실제 필요한 작업을 하실 경우에는 문서를 보고 직접 작성하셔도 되지만, 데모페이지에서 돌아가는 라이브러리이기 때문에 가장 호환성이 좋을 듯합니다.

 ChartViewer.cpp, ChartViewer.h 파일은 ChartDirector\mfcdemo\mfcdemo\ 경로 아래에 포함되어 있으니 해당 폴더로 접근하여 복사하시기 바랍니다.

그리고 하나더 해주어야 합니다. 해당 라이브러리를 실행하는데 있어 필요한 chartdir51.dll 파일을 Projects\blog01chart\Debug\ (.exe 파일이 포함된 폴더)에 복사해 두셔야 합니다.
 chartdir51.dll 파일은 압축을 해제한 데모 폴더 안의 lib 폴더안에 있습니다.

 이제 프로젝트에서 3가지를 추가해주어야 합니다. 해당 프로젝트 오른쪽 마우스 클릭을 통해 설정을 들어가거나 Alt+Enter를 통해 접근합니다.

아래와 같은 창이보입니다. Linker 부분의 Input에 lib를 추가해주어야 합니다.

Dependencles 부분에 마우스를 올리면 Edit... 가 보이게 됩니다. 해당 부분을 클릭합니다.

아래와 같이 직접 작성해주셔야 합니다. 저와 같은 경로를 가지고 있다면 아래와 같이 작성하시면 됩니다.

저는 코드가 있는 폴더 아래에 lib폴더를 복사하였습니다.

다음으로 C/C++ General 부분에 Include 디렉토리를 추가합니다. 추가하는 방법은 위와 동일합니다.

아래와 같은 창이 보이면 폴더모양을 선택하고 폴더를 지정하시면 됩니다. 그런데 아래와 같이 폴더의 절대경로가 노출 됩니다. 다른 PC에서 작업하시지 않는 이상 상관은 없지만 다른 PC에서도 작업을 하신다면 상대경로로 작성 해주셔야 합니다.

저는 include 폴더 역시 소스코드 폴더와 동일하게 있기에 include를 제외한 나머지 경로를 모두 지웠습니다. 확인을 하시면 위의 사진과 같은 경로를 확인 하실 수 있습니다.

조금 전에 복사해둔 ChartViewer.h 와 ChartViewer.cpp 파일을 추가해야 합니다.

프로젝트 명 위에서 오른쪽을 클릭 후 추가->Existing Item을 선택하고 2개의 파일을 선택합니다.

추가가 완료되면 아래와 같이 추가가 완료됩니다.

Picture Control 추가 및 소스코드 추가

이제 프로젝트의 다이얼로그에 Picture Control을 추가하고, 타입을 Bitmap으로 변경합니다.

도구상자에서 Picture Control을 추가해줍니다. 위치는 왼쪽 상단에 두시면 됩니다.

추가한 Picture Control의 Type을 변경합니다. 타입은 Bitmap 입니다.

추가한 Picture Control을 변수에 등록합니다.

변수 타입은 조금 전에 추가한 ChartViewer.cpp/.h 파일의 이름인 CChartViewer이고, 변수 명은 m_chartView로 작성하였습니다.

소스코드 부분 - 주요코드

프로젝트명Dlg.h 파일

#include "ChartViewer.h" //직접 입력해주셔야 합니다.
/*......*/
public:
	CChartViewer m_chartView; //Picture Control을 추가한 변수

프로젝트명Dlg.cpp 파일

 - 해당 코드는 doc폴더에 있는 cppchartdir.chm 의 예제 소스코드입니다.

//OnInitDialog() 에 추가해야할 소스코드
// TODO: Add extra initialization here
	// 차트에 필요한 데이터
    double data0[] = {42, 49, 33, 38, 51, 46, 29, 41, 44, 57, 59, 52, 37, 34, 51, 56,
        56, 60, 70, 76, 63, 67, 75, 64, 51};
    double data1[] = {50, 55, 47, 34, 42, 49, 63, 62, 73, 59, 56, 50, 64, 60, 67, 67,
        58, 59, 73, 77, 84, 82, 80, 84, 89};
    double data2[] = {87, 89, 85, 66, 53, 39, 24, 21, 37, 56, 37, 22, 21, 33, 13, 17,
        4, 23, 16, 25, 9, 10, 5, 7, 6};
    const char *labels[] = {"0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10",
        "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23",
        "24"};

    // Create a XYChart object of size 350 x 230 pixels
    XYChart *c = new XYChart(350, 230); //차트의 전체 크기를 정한다

    // Set the plotarea at (50, 30) and of size 250 x 150 pixels.
    c->setPlotArea(50, 30, 250, 150); //차트위 위치와 높이 넓이를 정한다.

    // Add a legend box at (55, 0) (top of the chart) using 8 pts Arial Font. Set
    // background and border to Transparent.
    c->addLegend(55, 0, false, "", 8)->setBackground(Chart::Transparent);

    // Add a title to the x axis
    c->xAxis()->setTitle("Network Load for Jun 12");

    // Add a title to the y axis
    c->yAxis()->setTitle("MBytes");

    // Set the labels on the x axis.
    c->xAxis()->setLabels(StringArray(labels, (int)(sizeof(labels) / sizeof(labels[0]))));

    // Display 1 out of 2 labels on the x-axis. Show minor ticks for remaining
    // labels.
    c->xAxis()->setLabelStep(2, 1);

    // Add three area layers, each representing one data set. The areas are drawn in
    // semi-transparent colors.
    c->addAreaLayer(DoubleArray(data2, (int)(sizeof(data2) / sizeof(data2[0]))),
        0x808080ff, "Server #1", 3);
    c->addAreaLayer(DoubleArray(data0, (int)(sizeof(data0) / sizeof(data0[0]))),
        0x80ff0000, "Server #2", 3);
    c->addAreaLayer(DoubleArray(data1, (int)(sizeof(data1) / sizeof(data1[0]))),
        0x8000ff00, "Server #3", 3);
	
	m_chartView.setChart(c);  //m_chartView에 Chart를 보여주기 위한 코드

실행

 위에서 설명했을 때 chartdir51.dll 파일을 .exe가 있는 폴더에 복사해두지 않아서 일어나는 오류코드입니다. 위에 해당 내용을 참고하여 복사해두시기 바랍니다.

해당 결과 값입니다.

 하단에는 ChartDirector에서 제작했다는 표시가 보입니다. 해당 내용을 지우려고 찾아봤지만 라이브러리에 포함된 내용인지 찾지를 못했습니다. 아래와 같이 MFC에서 간단하게 Chart를 작성할 수 있습니다.