High-speed Charting Control（MFC繪圖控件）--MFC繪圖Demo(包含鼠標響應)

首先我們先上效果圖，如果你需要這樣的Demo請點擊此處下載：High-speed Charting Control--MFC繪圖Demo

在開始之前，我們首先推薦一篇博客，該博客主要對該控件的英文開發文檔進行了翻譯，如果各位需要進一步開發該控件的其他功能可以詳細閱讀該博客或官方文檔：High-speed Charting Control--MFC繪製圖表（折線圖、餅圖、柱形圖）控件

接下來是該控件的下載地址：

免費官方下載地址（需要註冊下載，頁面有時會打不開）：https://www.codeproject.com/Articles/14075/High-speed-Charting-Control

CSDN下載地址（需要積分）：https://download.csdn.net/download/qq_15029743/10956256

好了，接下來正式介紹我們是如何畫圖的：

Step1:建立一個新的MFC工程文件，並將下載的控件的源文件（CSDN下載中的ChartCtrl_source.zip文件）解壓放到MFC工程目錄下：

Step2:導入控件類：

 

 Step3:程序界面拖入控件：

 

 選中拖入的自定義控件並更改屬性，這裏要改的屬性有Style，就在5右邊的0改爲2,0x52010000,Class命名爲ChartCtrl,ID我們可以自定義（這裏就使用默認的IDC_CUSTOM1）：

Step4: 添加頭文件，在對話框類的頭文件中把控件包含進來，具體代碼及實現效果如下如下：

#include "ChartCtrl/ChartCtrl.h"

Step5: 創建控件的成員變量：

CChartCtrl m_ChartCtrl1;  //這裏的成員變量名稱根據實際需要命名即可

關聯控件的成員變量和ID：

DDX_Control(pDX, IDC_CUSTOM1, m_ChartCtrl1);

此時，我們編譯運行，控件就顯示出來了：

 Step6: 爲控件添加座標軸：

CChartAxis *pAxis = NULL;
pAxis = m_ChartCtrl1.CreateStandardAxis(CChartCtrl::BottomAxis);
pAxis->SetAutomatic(true);
pAxis = m_ChartCtrl1.CreateStandardAxis(CChartCtrl::LeftAxis);
pAxis->SetAutomatic(true);

 Step7:創建標題

首先導入標題類的頭文件：

#include "ChartCtrl\ChartTitle.h"  //標題頭文件

 代碼實現：

TChartString str1;
str1 = _T("High-speed Charting畫圖Demo");
m_ChartCtrl1.GetTitle()->AddString(str1);

 

 

 Step8:一些外觀上的設計(通常白底繪圖看久了比較累，我們這裏進行一些顏色的改變)

	m_ChartCtrl.GetTitle()->SetColor(RGB(255, 255, 255));   //標題字體白色
	m_ChartCtrl.GetLeftAxis()->SetTextColor(RGB(255, 255, 255));  //左座標軸白色
	m_ChartCtrl.GetBottomAxis()->SetTextColor(RGB(255, 255, 255));  //底部座標軸白色
	m_ChartCtrl.SetBorderColor(RGB(255, 255, 255));  //邊框顏色白色
	m_ChartCtrl.SetBackColor(RGB(85, 85, 85));  //背景顏色深灰色

修改之後看起來舒服多了，不扎眼了：

Step9:畫線

先導入畫線的頭文件：

#include "ChartCtrl\ChartLineSerie.h"  //畫線頭文件

代碼實現：這裏我們把代碼添加到一個按鈕響應裏（按鈕畫圖）：

 

這裏我們畫一條過原點的直線，代碼如下：

 

	double X1Values[10], Y1Values[10];
	for (int i = 0; i<10; i++)
	{
		X1Values[i] = i;
		Y1Values[i] = i;
	}

	CChartLineSerie *pLineSerie2;

	m_ChartCtrl1.SetZoomEnabled(true);
	m_ChartCtrl1.RemoveAllSeries();//先清空
	pLineSerie2 = m_ChartCtrl1.CreateLineSerie();
	pLineSerie2->SetSeriesOrdering(poNoOrdering);//設置爲無序
	pLineSerie2->SetPoints(X1Values, Y1Values, 10);

 這樣，我們點擊之後就可以畫出一條直線了：

Step10:添加鼠標響應，很多時候我們需要知道繪圖控件中的某個點的具體座標，這時候我們可以通過添加十字光標來實現

 添加鼠標響應頭文件：

#include "ChartCtrl\ChartMouseListener.h"  //鼠標響應頭文件

定義兩個全局變量來存儲座標：

double x, y;

添加一個自定義消息來傳遞座標：

 

 點擊編輯代碼，然後我們來寫處理代碼：

	CString s;
	s.Format(_T("x = %.2f,y = %.2f"), x, y);
	CStatic* pStatic;
	pStatic = (CStatic*)GetDlgItem(IDC_STATIC);
	pStatic->SetWindowText(s);
	return 1;

 這裏的IDC_STATIC是我們提前準備的一個靜態文本框，用於顯示座標信息

 這裏我們還需要定義一下消息：

#define MESSAGE_UPDATEPOS WM_USER+1001

 加下來我們用代碼實現派生類：

class CCustomCursorListener : public CChartCursorListener
{
public:
	void OnCursorMoved(CChartCursor *pCursor, double xValue, double yValue)
	{
		x = xValue;
		y = yValue;
		SendMessage(m_hwnd, MESSAGE_UPDATEPOS, 0, 0);
		// Do something with the string...
	}

	void GetHwnd(HWND hwnd)
	{
		m_hwnd = hwnd;
	}
	HWND m_hwnd;
};

 

 最後，我們在按鈕下添加實現代碼：

    CCustomCursorListener* m_pCursorListener;
	CChartCrossHairCursor* pCrossHair =
		m_ChartCtrl1.CreateCrossHairCursor();

	HWND hWnd = this->GetSafeHwnd();
	m_pCursorListener = new CCustomCursorListener;
	m_pCursorListener->GetHwnd(hWnd);
	pCrossHair->RegisterListener(m_pCursorListener);

 

至此，我們完成了整個Demo,點擊畫圖即可獲得博客開頭的效果: