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

相關(guān)鏈接：

C++ GUI 繪圖控件目錄

MFC

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

Qt

qt超強精美繪圖控件 - QCustomPlot一覽qt超強繪圖控件qwt - 安裝及配置

---

也許這是vc下最好最方便的繪圖類，它有TeeChart的繪圖和操作風(fēng)格，不用當(dāng)心注冊破解的問題，因為它是開源的。不用打包注冊，因為它是封裝成類的，能方便擴展繼承。vc6.0到vs2010都能使用，而且非常簡單。

此類發(fā)表于codeproject

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

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

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

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

1 ChartCtrl類的導(dǎo)入

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

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

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

全選，確定-ok

這時工程就添加好這個控件了

2.創(chuàng)建控件

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

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

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

頭文件包含的樣式如下：

#include "ChartCtrl/ChartCtrl.h"

在對話框類添加變量，叫m_ChartCtrl1（后面還有m_ChartCtrl2通過動態(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);
}

編譯運行，繪圖控件就出來了

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

#include "ChartCtrl/ChartCtrl.h"

然后添加成員變量

CChartCtrl m_ChartCtrl2;

在resource.h里添加一個資源

添加IDC_ChartCtrl2，為1001，注意記得把_APS_NEXT_CONTROL_VALUE改成下一個資源號

在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)建了，下圖兩個控件分別通過對話框編輯器創(chuàng)建和動態(tài)創(chuàng)建，代碼在附件下載里

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

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


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

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

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


給m_ChartCtrl2創(chuàng)建時間坐標(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ù)用來設(shè)置時間顯示方式，格式化和COleDateTime的Format一樣
4.創(chuàng)建標(biāo)題 #include "ChartClassChartTitle.h"

在添加標(biāo)題時，先要說說ChartCtrl的字符串，ChartCtrl的字符串實際是stl的string和wstring，為了對應(yīng)unicode，作者對這兩種字符進行了一個宏定義，就像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)過宏定義，所以可以比較輕松的和TChartString轉(zhuǎn)換，另外TChartStringStream遠比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 可以直接用“=”對字符串賦值

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

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("時間坐標(biāo)軸");

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

設(shè)置完效果如圖

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

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

m_ChartCtrl1.EnableRefresh(false);
m_ChartCtrl2.EnableRefresh(false);
//////////////////////////////////////////////////////////////////////////
//畫圖測試
//////////////////////////////////////////////////////////////////////////
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è)置為無序
pLineSerie1->AddPoints(x, y,1000);
pLineSerie1->SetName(_T("這是IDC_ChartCtrl1的第一條線"));//SetName的作用將在后面講到

//////////////////////////////////////////////////////////////////////////
//時間軸畫圖
//////////////////////////////////////////////////////////////////////////
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è)置為無序
pLineSerie2->AddPoints(x, y,1000);
pLineSerie2->SetName(_T("這是IDC_ChartCtrl2的第一條線"));//SetName的作用將在后面講到

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

?

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

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

m_ChartCtrl1.EnableRefresh(false);
m_ChartCtrl2.EnableRefresh(false);
//////////////////////////////////////////////////////////////////////////
//畫圖測試
//////////////////////////////////////////////////////////////////////////
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è)置為無序
pLineSerie1->AddPoints(x, y,1000);
TChartStringStream strs1;
strs1 << _T("這是IDC_ChartCtrl1的第")
<< m_ChartCtrl1.GetSeriesCount()
<< _T("條曲線");
pLineSerie1->SetName(strs1.str());

//////////////////////////////////////////////////////////////////////////
//時間軸畫圖
//////////////////////////////////////////////////////////////////////////
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è)置為無序
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 動態(tài)曲線 具體可見：繪圖控件第五講——繪制動態(tài)曲線 ：http://blog.csdn.net/czyt1988/article/details/20136895 以前寫TeeChart畫圖的文章時好多人問怎么動態(tài)畫圖，其實所有畫圖控件的動態(tài)畫圖都一樣，就是不停的畫，動的只是數(shù)組，控件只負(fù)責(zé)畫圖，你想讓圖像動起來，就讓數(shù)據(jù)動起來！
數(shù)據(jù)動起來涉及到數(shù)組的左右移動，很簡單的一個算法而已 如有一個double數(shù)組 double pdx[100],pdy[100]; 每次畫圖時讓pdx左移一位

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

然后每隔0.幾秒畫出來，就發(fā)現(xiàn)動起來了

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

這是我在上研究生時寫的一篇文章，當(dāng)時放進草稿箱里一直沒發(fā)出來，今天無意看到，決定把他完成，demo代碼已經(jīng)找不到了，可能在我以前實驗室的電腦里吧~工作后也很少用mfc了，現(xiàn)在偶爾用用qt過把癮，大家如果對繪圖工控有需求的話，可以使用qt的qwt控件，也比較簡單，這個控件幫了我很多忙，在此向作者表示感謝，大家可以查看其源代碼學(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)繪制動態(tài)曲線

Qt

qt超強精美繪圖控件 - QCustomPlot一覽qt超強繪圖控件qwt - 安裝及配置

---

推廣

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