TeeChart替代品，MFC下好用的高速繪圖控件-(Hight-Speed Charting)

相關(guān)鏈接：

C++ GUI 繪圖控件目錄

MFC

VS2010 使用TeeChart繪圖控件 - 之一 - 控件和類的導(dǎo)入VS2010 使用TeeChart繪圖控件 - 之二 - 繪制圖形（折線圖，柱狀圖）TeeChart繪圖控件 - 之三 - 提高繪圖的效率MFC下好用的高速繪圖控件-(Hight-Speed Charting)繪制動(dòng)態(tài)曲線

Qt

qt超強(qiáng)精美繪圖控件 - QCustomPlot一覽qt超強(qiáng)繪圖控件qwt - 安裝及配置

---

也許這是vc下最好最方便的繪圖類，它有TeeChart的繪圖和操作風(fēng)格，不用當(dāng)心注冊(cè)破解的問(wèn)題，因?yàn)樗情_(kāi)源的。不用打包注冊(cè)，因?yàn)樗欠庋b成類的，能方便擴(kuò)展繼承。vc6.0到vs2010都能使用，而且非常簡(jiǎn)單。

此類發(fā)表于codeproject

在使用它的時(shí)候，展示一下它的效果吧：

如果你想需要上面這些效果的，果斷選它吧！

下面用圖文并茂的方式，來(lái)詳細(xì)介紹這個(gè)繪圖控件

首先，下載這個(gè)控件，最新可以從這里獲取codeproject

1 ChartCtrl類的導(dǎo)入

在工程下建立一個(gè)文件夾 叫ChartCtrl吧，里面放置ChartCtrl的源代碼

文件夾內(nèi)容如圖所示

然后讓vs導(dǎo)入這些類

全選，確定-ok

這時(shí)工程就添加好這個(gè)控件了

2.創(chuàng)建控件

2.1 對(duì)話框編輯器創(chuàng)建 對(duì)于一些不需要改變大小的對(duì)話框來(lái)說(shuō)，在對(duì)話框編輯器里拖曳創(chuàng)建控件是最舒服的方法了，這個(gè)ChartCtrl可以用用戶控件來(lái)創(chuàng)建
首先在對(duì)話框上放置一個(gè)Custom Control

修改屬性如下圖所示。這里要改的屬性有Style，就在5右邊的0改為2,0x52010000,Class命名為ChartCtrl,ID隨便改了

給對(duì)話框添加變量，和傳統(tǒng)的方法一樣。這里需要注意的是，由于文件都放置在工程文件的一個(gè)文件夾下，包含頭文件時(shí)需要指明路徑

頭文件包含的樣式如下：

#include "ChartCtrl/ChartCtrl.h"

在對(duì)話框類添加變量，叫m_ChartCtrl1（后面還有m_ChartCtrl2通過(guò)動(dòng)態(tài)創(chuàng)建的）

CChartCtrl m_ChartCtrl2;

?在DoDataExchange函數(shù)里添加關(guān)聯(lián)

void CSpeedChartCtrlDemoDlg::DoDataExchange(CDataExchange* pDX) 
{
    CDialogEx::DoDataExchange(pDX);
    DDX_Control(pDX, IDC_ChartCtrl1, m_ChartCtrl1);
}

編譯運(yùn)行，繪圖控件就出來(lái)了

2.2 動(dòng)態(tài)創(chuàng)建 添加頭文件： 同樣頭文件如下寫(xiě)：

#include "ChartCtrl/ChartCtrl.h"

然后添加成員變量

CChartCtrl m_ChartCtrl2;

在resource.h里添加一個(gè)資源

添加IDC_ChartCtrl2，為1001，注意記得把_APS_NEXT_CONTROL_VALUE改成下一個(gè)資源號(hào)

在OnInitDialog里創(chuàng)建

如：

CRect rect,rectChart; 
GetDlgItem(IDC_ChartCtrl1)->GetWindowRect(&rect);
ScreenToClient(rect);
rectChart = rect;
rectChart.top = rect.bottom + 3;
rectChart.bottom = rectChart.top + rect.Height();
m_ChartCtrl2.Create(this,rectChart,IDC_ChartCtrl2);
m_ChartCtrl2.ShowWindow(SW_SHOWNORMAL);

這樣就可以創(chuàng)建了，下圖兩個(gè)控件分別通過(guò)對(duì)話框編輯器創(chuàng)建和動(dòng)態(tài)創(chuàng)建，代碼在附件下載里

此時(shí)什么也不會(huì)顯示，需要添加坐標(biāo)軸

3.創(chuàng)建坐標(biāo)軸 ? ChartCtrl一共有3種坐標(biāo)，都繼承于CChartAxis


頭文件ChartCtrl.h已經(jīng)包含這些坐標(biāo)，不需要引入 下面分別建立兩種坐標(biāo)軸，一個(gè)是數(shù)值型一個(gè)是時(shí)間型
在m_ChartCtrl1建立兩個(gè)都是數(shù)值型的坐標(biāo) 在創(chuàng)建m_ChartCtrl1之后加入如下創(chuàng)建坐標(biāo)軸的代碼：（這里寫(xiě)在OnInitDialog里）

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

這樣就建立兩個(gè)坐標(biāo)軸了，如圖所示


給m_ChartCtrl2創(chuàng)建時(shí)間坐標(biāo)

CChartDateTimeAxis* pDateAxis= NULL;
pDateAxis = NULL; 
pDateAxis = m_ChartCtrl2.CreateDateTimeAxis(CChartCtrl::BottomAxis);
pDateAxis->SetAutomatic(true);
pDateAxis->SetTickLabelFormat(false,_T("%m月%d日"));
pAxis = m_ChartCtrl2.CreateStandardAxis(CChartCtrl::LeftAxis);
pAxis->SetAutomatic(true);

SetTickLabelFormat函數(shù)用來(lái)設(shè)置時(shí)間顯示方式，格式化和COleDateTime的Format一樣
4.創(chuàng)建標(biāo)題 #include "ChartClassChartTitle.h"

在添加標(biāo)題時(shí)，先要說(shuō)說(shuō)ChartCtrl的字符串，ChartCtrl的字符串實(shí)際是stl的string和wstring，為了對(duì)應(yīng)unicode，作者對(duì)這兩種字符進(jìn)行了一個(gè)宏定義，就像TCHAR一樣，定義如下：

#include
#include 

#if defined _UNICODE ||defined UNICODE
    typedef std::wstring TChartString;
    typedef std::wstringstream TChartStringStream;
#else
    typedef std::string TChartString;
    typedef std::stringstream TChartStringStream;
#endif

所以在多字節(jié)情況下，就是string。由于MFC大部分都是用CString，CString也是經(jīng)過(guò)宏定義，所以可以比較輕松的和TChartString轉(zhuǎn)換，另外TChartStringStream遠(yuǎn)比CString的Format靈活和直觀，建議大家研究研究！

?加入如下代碼：

TChartString str1;
str1 = _T("IDC_ChartCtrl1 - m_ChartCtrl1");
m_ChartCtrl1.GetTitle()->AddString(str1);

CString str2(_T(""));
str2 = _T("IDC_ChartCtrl2 - m_ChartCtrl2");
m_ChartCtrl2.GetTitle()->AddString(TChartString(str2));

TChartString 可以直接用“=”對(duì)字符串賦值

設(shè)置坐標(biāo)軸的標(biāo)題，首先需要獲取坐標(biāo)GetLeftAxis，GetBottomAxis ……
獲取坐標(biāo)后，獲得坐標(biāo)的文字標(biāo)簽GetLabel，然后進(jìn)行修改
如下兩種寫(xiě)法，一種比較安全繁瑣，一種就直接過(guò)去就可以，看個(gè)人喜好

CChartAxisLabel* pLabel = NULL;
CChartAxis *pAxis = NULL;
TChartString str1 = _T("左坐標(biāo)軸");

CChartAxisLabel* pLabel = NULL;

pAxis = m_ChartCtrl1.GetLeftAxis();
if(pAxis)
    pLabel = pAxis->GetLabel();
if(pLabel)
    pLabel->SetText(str1);

m_ChartCtrl2.GetLeftAxis()->GetLabel()->SetText(str1);

str1 = _T("數(shù)值坐標(biāo)軸");
pAxis = m_ChartCtrl1.GetBottomAxis();
if(pAxis)
    pLabel = pAxis->GetLabel();
if(pLabel)
    pLabel->SetText(str1);
str1 = _T("時(shí)間坐標(biāo)軸");

m_ChartCtrl2.GetBottomAxis()->GetLabel()->SetText(str1);

設(shè)置完效果如圖

標(biāo)題還可以更改顏色，這里不再重復(fù)描述。

5.畫(huà)圖 5.1 創(chuàng)建線圖 ChartCtrl的畫(huà)線非常簡(jiǎn)單通用，遠(yuǎn)比TeeChart簡(jiǎn)單和方便。 創(chuàng)建線圖先要?jiǎng)?chuàng)建一個(gè)圖形系列，這個(gè)和TeeChart很像 用函數(shù)CChartCtrl的CreateLineSerie()函數(shù)即可創(chuàng)建一個(gè)線圖，這個(gè)函數(shù)會(huì)返回這個(gè)系列的指針，所有在創(chuàng)建之后記得保存下這個(gè)指針，以便之后的操作。線圖系列的指針是CChartLineSerie，記得包含頭文件 #include "ChartClassChartLineSerie.h" 創(chuàng)建完序列之后就可以用AddPoints函數(shù)把double數(shù)組的數(shù)據(jù)畫(huà)出來(lái)，這個(gè)比TeeChart方便多了 ? 如下這是畫(huà)圖的函數(shù)

m_ChartCtrl1.EnableRefresh(false);
m_ChartCtrl2.EnableRefresh(false);
//////////////////////////////////////////////////////////////////////////
//畫(huà)圖測(cè)試
//////////////////////////////////////////////////////////////////////////
double x[1000], y[1000];
for (int i=0; i<1000; i++)
{
    x[i] = i;
    y[i] = sin(float(i));
}
CChartLineSerie *pLineSerie1;
m_ChartCtrl1.RemoveAllSeries();//先清空
pLineSerie1 = m_ChartCtrl1.CreateLineSerie();
pLineSerie1->SetSeriesOrdering(poNoOrdering);//設(shè)置為無(wú)序
pLineSerie1->AddPoints(x, y,1000);
pLineSerie1->SetName(_T("這是IDC_ChartCtrl1的第一條線"));//SetName的作用將在后面講到

//////////////////////////////////////////////////////////////////////////
//時(shí)間軸畫(huà)圖
//////////////////////////////////////////////////////////////////////////
COleDateTime t1(COleDateTime::GetCurrentTime());
COleDateTimeSpan tsp(1,0,0,0);
for (int i=0; i<1000; i++)
{
    x[i] = t1.m_dt;
    y[i] = sin(float(i));
    t1 += tsp;
}
CChartLineSerie *pLineSerie2;
m_ChartCtrl2.RemoveAllSeries();//先清空
pLineSerie2 = m_ChartCtrl2.CreateLineSerie();
pLineSerie2->SetSeriesOrdering(poNoOrdering);//設(shè)置為無(wú)序
pLineSerie2->AddPoints(x, y,1000);
pLineSerie2->SetName(_T("這是IDC_ChartCtrl2的第一條線"));//SetName的作用將在后面講到

m_ChartCtrl1.EnableRefresh(true);
m_ChartCtrl2.EnableRefresh(true);

?

RemoveAllSeries函數(shù)可以清楚所有線條，EnableRefresh函數(shù)可以提供繪圖效率，另外告訴大家一個(gè)bug，時(shí)間軸坐標(biāo)在調(diào)第二次用RemoveAllSeries函數(shù)后，畫(huà)圖時(shí)一定要EnableRefresh(false)再EnableRefresh(true);否則會(huì)斷言

下面將介紹更多的會(huì)圖方法 在上一篇已經(jīng)介紹了簡(jiǎn)單的線條繪制，實(shí)際上可能需要多的功能 5.2 添加曲線 控件可以繪制不止一條曲線，可以繪制足夠多的曲線在上面，下面演示如何添加多個(gè)曲線 只要在畫(huà)圖時(shí)不清楚原來(lái)的曲線就會(huì)添加多一條曲線 把代碼的RemoveAllSeries去掉就會(huì)添加多條曲線

m_ChartCtrl1.EnableRefresh(false);
m_ChartCtrl2.EnableRefresh(false);
//////////////////////////////////////////////////////////////////////////
//畫(huà)圖測(cè)試
//////////////////////////////////////////////////////////////////////////
double x[1000], y[1000];
for (int i=0; i<1000; i++)
{
x[i] = i;
y[i] = sin(float(i)*m_ChartCtrl1.GetSeriesCount());
}
CChartLineSerie *pLineSerie1;
// m_ChartCtrl1.RemoveAllSeries();//不清空
pLineSerie1 = m_ChartCtrl1.CreateLineSerie();
pLineSerie1->SetSeriesOrdering(poNoOrdering);//設(shè)置為無(wú)序
pLineSerie1->AddPoints(x, y,1000);
TChartStringStream strs1;
strs1 << _T("這是IDC_ChartCtrl1的第")
<< m_ChartCtrl1.GetSeriesCount()
<< _T("條曲線");
pLineSerie1->SetName(strs1.str());

//////////////////////////////////////////////////////////////////////////
//時(shí)間軸畫(huà)圖
//////////////////////////////////////////////////////////////////////////
COleDateTime t1(COleDateTime::GetCurrentTime());
COleDateTimeSpan tsp(1,0,0,0);
for (int i=0; i<1000; i++)
{
x[i] = t1.m_dt;
y[i] = sin(float(i)*m_ChartCtrl2.GetSeriesCount());
t1 += tsp;
}
CChartLineSerie *pLineSerie2;
// m_ChartCtrl2.RemoveAllSeries();//不清空
pLineSerie2 = m_ChartCtrl2.CreateLineSerie();
pLineSerie2->SetSeriesOrdering(poNoOrdering);//設(shè)置為無(wú)序
pLineSerie2->AddPoints(x, y,1000);
TChartStringStream strs2;
strs2 << _T("這是IDC_ChartCtrl2的第")
<< m_ChartCtrl2.GetSeriesCount()
<< _T("條曲線");
pLineSerie2->SetName(strs2.str());

m_ChartCtrl1.EnableRefresh(true);
m_ChartCtrl2.EnableRefresh(true);

這里我添加了n條。

5.3 動(dòng)態(tài)曲線 具體可見(jiàn)：繪圖控件第五講——繪制動(dòng)態(tài)曲線 ：http://blog.csdn.net/czyt1988/article/details/20136895 以前寫(xiě)TeeChart畫(huà)圖的文章時(shí)好多人問(wèn)怎么動(dòng)態(tài)畫(huà)圖，其實(shí)所有畫(huà)圖控件的動(dòng)態(tài)畫(huà)圖都一樣，就是不停的畫(huà)，動(dòng)的只是數(shù)組，控件只負(fù)責(zé)畫(huà)圖，你想讓圖像動(dòng)起來(lái)，就讓數(shù)據(jù)動(dòng)起來(lái)！
數(shù)據(jù)動(dòng)起來(lái)涉及到數(shù)組的左右移動(dòng)，很簡(jiǎn)單的一個(gè)算法而已 如有一個(gè)double數(shù)組 double pdx[100],pdy[100]; 每次畫(huà)圖時(shí)讓pdx左移一位

for(int i(0);i<99;++i)
{
   pdx[i] = pdx[i+1];
   pdy[i] = pdy[i+1];
}
pdy[99] = ……需要顯示的新數(shù)據(jù)……

然后每隔0.幾秒畫(huà)出來(lái)，就發(fā)現(xiàn)動(dòng)起來(lái)了

ChartCtrl提供了兩種繪圖函數(shù)，AddPoints和AddPoint,這兩種函數(shù)在繪制動(dòng)態(tài)圖時(shí)會(huì)有所區(qū)別，區(qū)別見(jiàn)上圖，上面的是AddPoints，繪圖長(zhǎng)度固定，AddPoint效果見(jiàn)下圖，圖線會(huì)不停積累。

這是我在上研究生時(shí)寫(xiě)的一篇文章，當(dāng)時(shí)放進(jìn)草稿箱里一直沒(méi)發(fā)出來(lái)，今天無(wú)意看到，決定把他完成，demo代碼已經(jīng)找不到了，可能在我以前實(shí)驗(yàn)室的電腦里吧~工作后也很少用mfc了，現(xiàn)在偶爾用用qt過(guò)把癮，大家如果對(duì)繪圖工控有需求的話，可以使用qt的qwt控件，也比較簡(jiǎn)單，這個(gè)控件幫了我很多忙，在此向作者表示感謝，大家可以查看其源代碼學(xué)習(xí)其編程思想。

---

下載地址：http://www.codeproject.com/Articles/14075/High-speed-Charting-Control? ?

csdn資源下載地址：http://download.csdn.net/detail/czyt1988/6880917

---

C++ GUI 繪圖控件目錄

MFC

VS2010 使用TeeChart繪圖控件 - 之一 - 控件和類的導(dǎo)入VS2010 使用TeeChart繪圖控件 - 之二 - 繪制圖形（折線圖，柱狀圖）TeeChart繪圖控件 - 之三 - 提高繪圖的效率MFC下好用的高速繪圖控件-(Hight-Speed Charting)繪制動(dòng)態(tài)曲線

Qt

qt超強(qiáng)精美繪圖控件 - QCustomPlot一覽qt超強(qiáng)繪圖控件qwt - 安裝及配置

---

推廣

teechart應(yīng)用技術(shù)詳解——快速圖表制作工具 VC++ MFC Extensions ?by Example/J.E. Swanke C++ Primer Plus 第6版