티스토리 뷰

크리에이티브 커먼즈 라이선스
Creative Commons License
이 저작물은 크리에이티브 커먼즈 코리아 저작자표시 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.
본문

 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을 여는 방법을 모르시면 열어보세요.

더보기


 아래와 같이 로그와 함께 데모파일이 실행되었습니다. 오른쪽 화면의 리스트에 프로젝트 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를 작성할 수 있습니다.



개인 광고 영역


댓글
  • 프로필사진 비밀댓글입니다 2012.10.09 05:03
  • 프로필사진 BlogIcon taehwan 도움이 되셨다니 다행이군요!^^;; 제가 링크걸어둔 블로그로 가시면 더 많은 차트들도 있으니 참고해보세요 2012.10.09 09:35 신고
  • 프로필사진 비밀댓글입니다 2012.10.09 15:27
  • 프로필사진 BlogIcon taehwan 라이센스에 대해선 저도 자세한걸 모르겠네요.
    홈페이지 설명은 되어 있는데 아마 유료버전을 구입할 경우에는 하단의 노란줄이 사라질것 같아요.
    그외에는 무료로 사용해도 좋지만 해당 문구를 다는 조건인 듯합니다.
    2012.10.09 15:59 신고
  • 프로필사진 비밀댓글입니다 2012.10.09 16:10
  • 프로필사진 BlogIcon taehwan 라이센스 명시가 있었군요.저는 과제용으로 사용하다보니 그것까지는 못본것 같네요. ㅠㅜ 자세한 정보 못드려서 죄송합니다! 2012.10.09 16:18 신고
  • 프로필사진 초보개발자 아닙니다~
    덕분에 좋은 자료 접했는데 감사할뿐이죠~
    히히 건강 지키시고 기회가 된다면 나중에 또 뵈요~
    2012.10.09 16:40 신고
  • 프로필사진 BlogIcon taehwan 넵^^ 감사합니다. 감기 조심하시구요. 2012.10.09 16:43 신고
  • 프로필사진 비밀댓글입니다 2013.02.14 20:12
  • 프로필사진 BlogIcon taehwan 감사합니다! 2013.02.15 01:12 신고
  • 프로필사진 비밀댓글입니다 2014.02.07 00:31
  • 프로필사진 BlogIcon taehwan 해당 부분의 오류는 필요한 파일을 복사하지 않아서 일어난것 같습니다. 필요한 파일들을 정확히 복사하셔서 다시 시도해보시기 바랍니다. 그리고 기본적으로 visual studio 2010에서 기본 빌드가 되는지 확인하신 후 진행해보시기 바랍니다. 2014.02.09 21:15 신고
  • 프로필사진 천상륜 좋은 정보 감사합니다. 2014.03.26 18:12 신고
  • 프로필사진 BlogIcon taehwan 감사합니다^^; 2014.03.30 21:50 신고
  • 프로필사진 비밀댓글입니다 2014.06.06 18:23
  • 프로필사진 BlogIcon taehwan MFC를 하지 않고있어서 도움을 드리지 못할것 같습니다. 늦은 댓글 죄송합니다. 2014.06.14 09:40 신고
  • 프로필사진 비밀댓글입니다 2015.11.28 19:44
  • 프로필사진 BlogIcon taehwan 안녕하세요. 학생때 공부한걸 정리해둔거라서 정확한 답은 드릴 수 없습니다.
    우선 제가 적어둔 내용으로는. chartdir51.dll 은 다운받은 패키지에 포함되어 있어야 합니다. 좀더 최신 자료를 찾아보시거나 백신에서 탐지하여 삭제된것인지 확인이 필요해보입니다.
    2015.12.01 21:08 신고
  • 프로필사진 양윤섭 1>c:\users\yang\documents\visual studio 2008\projects\test_chart\test_chartchartdirector\test_chartchartdirectordlg.cpp(205) : error C2065: 'm_chartView' : 선언되지 않은 식별자입니다.
    1>c:\users\yang\documents\visual studio 2008\projects\test_chart\test_chartchartdirector\test_chartchartdirectordlg.cpp(205) : error C2228: '.setChart' 왼쪽에는 클래스/구조체/공용 구조체가 있어야 합니다.

    두가지 에러가 발생합니다.
    Header 부분에는
    #include "ChartViewer.h"
    public:
    CChartViewer m_chartView;

    추가 했는데 말이죠...ㅠㅠ
    아무튼 너무좋은자료 감사합니다.
    혹시 추가적으로 라이센스 노란줄 지울수있는 방법이 있나요?
    2016.02.23 11:29 신고
  • 프로필사진 비밀댓글입니다 2016.05.27 10:31
  • 프로필사진 BlogIcon taehwan 6.0에서는 동작 하지 않을 수 있습니다. 해당 라이브러리에서 살펴보시는게 좋을것 같습니다. 2016.05.30 21:20 신고
  • 프로필사진 neates 전 저거 노란색 바를 다른 도구로 가렸슴다 @_@ 2016.05.27 16:28 신고
  • 프로필사진 BlogIcon taehwan 아핫.. 그런것도 좋은 방법이죠!..... 하지만 라이센스라서^^;;;; 2016.05.30 21:21 신고
  • 프로필사진 시원하자 @_@ 웃고 갑니다 덕분에.. <퍽 2016.08.09 18:58 신고
  • 프로필사진 감사합니다. picture control 에서 비트맵으로 바꾼다음에 변수 추가를 하려고하는데 '멤버 변수를 ID가 IDC_STARIC인 컨트롤에 추가할 수 없습니다.' 라는 에러창이 뜨네요. 2018.06.03 16:51 신고
댓글쓰기 폼