QCustomplot使用分享(八) 繪制圖表-加載cvs文件

目錄

• 一、概述
• 二、效果圖
• 三、源碼講解
  • 1、源碼結構
  • 2、頭文件
  • 3、移動游標
  • 4、設置坐標軸矩形個數
  • 5、添加圖表數據
  • 6、設置折線圖類型
  • 6、其他函數
• 四、測試方式
  • 1、測試工程
  • 2、測試文件
  • 3、測試代碼
• 五、相關文章
• 六、總結
• 七、關於美化

一、概述

之前做過一款金融產品，名字叫做財聯社，感興趣的可以瞅一眼財聯社-產品展示，由於需要畫復雜的k線圖和一些輔助的圖表，我個人調研了幾個繪圖庫，包括：QWt、QCustomPlot、QtChart和directUI。最后各方考慮，決定使用QCustomPlot來做我們的基礎繪圖庫，這里有幾個方面的考慮

1. 首先QCP他是開源的
2. 代碼只有2個文件，比較方便的可以引入我們的現有的代碼
3. 代碼可讀性比較強，定制方便

當我們的繪圖庫選定后，理所當然的就是去研究我們這個庫了，因此我也花了幾天的時間去研究了我們這個繪圖庫，並做了一個簡單的demo，感興趣的可以去看之前寫的文章，demo都在CSDN上放着，如果沒有分需要我發的可以留言。

之前講解的文章我在后邊相關文章小節已經給出，有想法的同學也可以直接先去看之前的文章，這樣更容易理解

二、效果圖

如下圖所示，是我做的一個測試效果圖，途中包括一個簡單的折線圖和游標，折線圖的顯示模式有十幾種效果，具體可以看QCustomplot使用分享(一) 能做什么事這篇文章里的截圖，這里我就不在貼出。

這個效果圖只是展示了一部分簡單的功能，我封裝的繪圖控件實際上主要是用於用於加載cvs文件，然后顯示相應的圖表，當然了，如果你想自己獲取數據添加給圖表也是支持的。

最后該繪圖控件還提供了很多接口，可以獲取當前繪圖數據，比如：

1. 游標對於的x值、y值，最多提供了2個游標
2. 獲取兩個游標之間的x值數據段
3. 獲取兩個游標之間的y值數據段，並且可以指定折線圖
4. 設置折線圖顏色
5. 設置折線圖類型設置4個軸的標題欄名稱
6. 設置游標顏色

下面的文章中我會分析下主要的接口和核心功能實現

圖中的展示效果測試代碼如下，代碼中的關鍵節點就2個

1. 構造ESCvsDBOperater類，並加載cvs文件
2. 通過Set接口設置數據，並設置折線圖類型

ESCsvDBOperater * csvDBOperater = new ESCsvDBOperater(nullptr);
csvDBOperater->loadCSVFile(qApp->applicationDirPath() + "\\temp\\test31.csv");
QStringList names = csvDBOperater->getCSVNames();
auto callback = [this, names](const QString & name, const QVector<double> & data){
	int index = names.indexOf(name);
	if (index != -1)
	{
		if (index == 0)
		{
			ui->widget->SetGraphKey(data);
		}
		else
		{
			int l = name.indexOf("(");
			int r = name.indexOf(")");
			if (l != -1 && r != -1)
			{
				ui->widget->SetGraphValue(index - 1, name.left(l), /*name.mid(l + 1, r - l - 1)*/"", data);
				ui->widget->SetGraphScatterStyle(index - 1, 4);
			}
			else
			{
				ui->widget->SetGraphValue(index - 1, name, "", data);
			}
		}
	}

當然QCP不僅僅能顯示折線圖，他還可以顯示各種各樣的效果圖，感興趣的到QCustomplot使用分享(一) 能做什么事文章中觀看

三、源碼講解

1、源碼結構

如圖所示，是工程的頭文件截圖，圖中的文件數量比較多，但是對外我們使用的可能只是一個ESMPMultiPlot類，這個類中提供了很多接口，足夠我們使用，當然了如果有特殊需求的話，我們還可以進行提供定制

2、頭文件

如下是頭文件中的接口，我只是把相關的Public接口列出來了，而這些接口也正好是我們平時使用比較多的接口，看接口名稱應該都知道接口庫是干什么的，因此這里不再細說

void SetGraphCount(int);
void SetGraphKey(const QVector<double> &);
double GetGraphKey(double);
void SetGraphValue(int, const QString &, const QString &, const QVector<double> &);
void SetGraphScatterStyle(int, int);
double GetGraphValue(int, bool);//獲取折線圖所在游標出y值 參數1：折線下標   參數2：左右游標標識
double GetGraphValue(int, double);//獲取折線圖所在游標出y值 參數1：折線下標   參數2：x
void SetGraphColor(int, const QColor &);
void SetGraphColor(const QString &, const QColor &);
void SetGraphUnit(int, const QString &);
void SetGraphTitle(int, const QString &);
void RefrushGraphID(int, const QString &);

int GetGraphIndex(const QString &) const;

void SetCursorColor(bool, const QColor &);
void ShowCursor(bool visible = true);
double GetCursorKey(bool);
bool CursorVisible();
double GetCursorValue(bool);

void ResizeKeyRange(bool);
void SetKeyRange(double, double);
void SetVauleRange(double, double);

void ConfigureGraph();//設置
std::shared_ptr<AxisRectConfigurations> GetAxisCache();

3、移動游標

如下代碼所示，是移動游標的核心代碼

void ESMPPlot::mouseMoveEvent(QMouseEvent * event)
{
	if (m_bDragCursor && m_pDragCursor)
	{
		double pixelx = event->pos().x();
		QCPRange keyRange = axisRect()->axis(QCPAxis::atBottom)->range();
		double min = axisRect()->axis(QCPAxis::atBottom)->coordToPixel(keyRange.lower);
		double max = axisRect()->axis(QCPAxis::atBottom)->coordToPixel(keyRange.upper);
		double lcursor = m_mapLeftCursor.begin().key()->point1->key();
		double lcursorx = axisRect()->axis(QCPAxis::atBottom)->coordToPixel(lcursor);
		double rcursor = m_mapRightCursor.begin().key()->point1->key();
		double rcursorx = axisRect()->axis(QCPAxis::atBottom)->coordToPixel(rcursor);
		if (min > pixelx)
		{
			pixelx = min;
		}
		else if (max < pixelx)
		{
			pixelx = max;
		}
		if (m_bLeftCursor)
		{
			if (pixelx >= rcursorx - 4 && layer(r_cursorLayer)->visible())
			{
				pixelx = rcursorx - 4;
			}
			double key = axisRect()->axis(QCPAxis::atBottom)->pixelToCoord(pixelx);
			double value1 = m_pDragCursor->point1->value();
			double value2 = m_pDragCursor->point2->value();
			for each (QCPItemStraightLine * line in m_mapLeftCursor.keys())
			{
				line->point1->setCoords(key, value1);
				line->point2->setCoords(key, value2);
			}
			m_pLeftText->setText(QString::number(GetGraphKey(pixelx)));
			m_pLeftText->position->setPixelPosition(QPoint(pixelx, axisRect()->rect().bottom() + 25));
		}
		else
		{
			if (pixelx <= lcursorx + 4 && layer(l_cursorLayer)->visible())
			{
				pixelx = lcursorx + 4;
			}
			double key = axisRect()->axis(QCPAxis::atBottom)->pixelToCoord(pixelx);
			double value1 = m_pDragCursor->point1->value();
			double value2 = m_pDragCursor->point2->value();
			for each (QCPItemStraightLine * line in m_mapRightCursor.keys())
			{
				line->point1->setCoords(key, value1);
				line->point2->setCoords(key, value2);
			}
			m_pRightText->setText(QString::number(GetGraphKey(pixelx)));
			m_pRightText->position->setPixelPosition(QPoint(pixelx, axisRect()->rect().bottom() + 25));
		}
		event->accept();
		replot();
		emit CursorChanged(m_bLeftCursor);
		return;
	}

	__super::mouseMoveEvent(event);
}

在ESMPPlot類中，m_mapLeftCursor和m_mapRightCursor分別是左右游標，為什么這里取了一個map呢？答案是：當時設計的時候是支持多個垂直擺放的游標可以進行游標同步，如果炒股的同學可能就會知道，k線和指標之間可能會有一個數值方便的線，不管在哪個繪圖區進行移動，另一個圖表里的線也會跟着移動

不了解這個的同學也不要緊，我們這個控件默認的就是一個表，因此這個map里也就只存了一個指，因此可以不關心這個問題

在ESMPMultiPlot類中，我們模擬了ESMPPlot的功能，這個時候呢？我們的坐標軸矩形只有一個了，x軸都是一樣的，表示時間，對於不同曲線的y軸我們進行了平移，以達到不同的顯示位置

這里邊有一個很重的技巧，那就是我們對y軸數據進行了一次單位換算，讓他顯示的時候可以更好顯示在我們制定的區域內，可能像下面這樣

/*
	y1p=(y1-Yzero1)/Ygrid1+Xaxis1;%核心轉換公式，將原始坐標值y1轉換為新坐標值y1p
	y1;%原始數值
	Yzero1;%零點幅值，決定曲線1零點位置的變量
	Ygrid1;%單格幅值，決定曲線1每個單元格大小的量
	Xaxis1;%顯示位置，決定曲線1在畫圖板中顯示位置的變量
*/

當然了，我們轉換后的坐標只是為了顯示方便而已，如果我們根據UI獲取原始值，我們還需要使用一個逆向公式進行轉換回去。

4、設置坐標軸矩形個數

QCP他自己的邏輯是這樣的，每一個QCustomPlot類都包括多個坐標軸矩形，而一個坐標軸矩形里又可以包含多個圖表，因此我們這個控件是這樣的：

1. 一個坐標軸矩形
2. 多個QCPGraph

當我們設置的圖表數量大於已有圖表時，需要使用takeAt接口移除多余的圖表；當我們設置的圖表數據小於已有圖表時，就需要添加新圖表對象，添加時機是設置圖表數據時

由於這個函數的代碼量比較大，因此這里我刪除了一些異常處理代碼和設置屬性代碼

添加圖表數據的流程可能像這面這樣

1. 首先處理數據異常
2. 添加坐標軸
3. 根據當前的折線圖個數，計算當前折線圖的位置和一些轉換可能用的系數比率
4. 添加圖表所有兩側的標題欄名稱，如name和unit
5. 刷新圖表

void ESMPMultiPlot::SetGraphCount(int count)
{
	QCPAxisTickerText * leftTick = new QCPAxisTickerText;
	axisRect()->axis(QCPAxis::atLeft)->setTicker(QSharedPointer<QCPAxisTickerText>(leftTick));

	QCPAxisTickerText * rightTick = new QCPAxisTickerText;
	axisRect()->axis(QCPAxis::atRight)->setTicker(QSharedPointer<QCPAxisTickerText>(rightTick));
	
	int tickCount = m_iCount * 4;//每個折線4個大刻度
	double tickDistance = (720 + 100)/ tickCount;
	QMap<double, QString> ticks;
	for (int i = 0; i <= tickCount; ++i)
	{
		ticks[tickDistance * i] = "";
	}
	leftTick->setTicks(ticks);
	leftTick->setSubTickCount(4);//每個大刻度包含4個小刻度

	double labelDistance = 720 / m_iCount;
	m_vecVerticalTick.resize(m_iCount);
	m_vecNames.resize(m_iCount);
	m_vecUnits.resize(m_iCount);
	double step = 1.0 / m_iCount;
	for (int i = 0; i < m_vecVerticalTick.size(); ++i)
	{
		m_vecVerticalTick[i] = labelDistance * i + labelDistance / 2;

		QCPItemText * name = new QCPItemText(this);
		name->position->setCoords(QPointF(0.01, 1 - (step * i + step / 2)));
		m_vecNames[m_vecVerticalTick.size() - i - 1] = name;

		QCPItemText * unit = new QCPItemText(this);
		unit->position->setCoords(QPointF(0.9, 1 - (step * i + step / 2)));
		m_vecUnits[m_vecVerticalTick.size() - i - 1] = unit;
	}

	RefrushItemPosition();

	m_graphConfigure->resize(count);
}

5、添加圖表數據

毫無疑問，添加圖表數據是我們這個控件的非常重要的一個借口
如下代碼所示，看我們是怎么添加數據的

1. 首先排除數據異常情況
2. 更新圖表的各個軸的名稱
3. 然后給圖表添加數據
4. 如果圖表不存在則添加一個新的
5. 設置圖表數據
6. 設置坐標軸信息
7. 設置折線圖對應的標題欄名稱

void ESMPPlot::SetGraphValue(int index
	, const QString & xname, const QString & yname, const QVector<double> & values)
{
	if (index >= m_iCount
		|| values.size() == 0)
	{
		return;
	}

	m_vecIndex[index] = xname;
	m_vecUnit[index] = yname;
	m_oldDatas[index] = values;

	QList<QCPGraph *> graphs = axisRect(index)->graphs();
	QCPGraph * graph = nullptr;
	if (graphs.size() == 0)
	{
		graph = addGraph(axisRect(index)->axis(QCPAxis::atBottom)
			, axisRect(index)->axis(QCPAxis::atLeft));
		graph->setLineStyle(QCPGraph::lsLine);
		graph->setPen(QColor(255, 0, 0, 200));
	}
	else
	{
		graph = graphs.at(0);
	}
	
	graph->setData(m_vecKeys, values, true);
	auto miniter = std::min_element(values.begin(), values.end());
	auto maxiter = std::max_element(values.begin(), values.end());
	double padding = (*maxiter - *miniter) * 0.2;
	axisRect(index)->axis(QCPAxis::atLeft)->ticker()->setTickOrigin(*miniter - padding);
	axisRect(index)->axis(QCPAxis::atLeft)->ticker()->setTickStepStrategy(
		QCPAxisTicker::tssReadability);
	axisRect(index)->axis(QCPAxis::atLeft)->ticker()->setTickCount(8);
	axisRect(index)->axis(QCPAxis::atLeft)->setRange(*miniter - padding, *maxiter + padding);

	axisRect(index)->axis(QCPAxis::atRight)->ticker()->setTickOrigin(*miniter - padding);
	axisRect(index)->axis(QCPAxis::atRight)->ticker()->setTickStepStrategy(
		QCPAxisTicker::tssReadability);
	axisRect(index)->axis(QCPAxis::atRight)->ticker()->setTickCount(8);
	axisRect(index)->axis(QCPAxis::atRight)->setRange(*miniter - padding, *maxiter + padding);
	
	int leftPadding = QFontMetrics(axisRect(index)->axis(QCPAxis::atLeft)->labelFont()).width(xname);
	axisRect(index)->axis(QCPAxis::atLeft)->setLabel(xname);
	
	int rightPadding = QFontMetrics(axisRect(index)->axis(QCPAxis::atBottom)->labelFont()).width(yname);
	axisRect(index)->axis(QCPAxis::atBottom)->setLabel(yname);
}

6、設置折線圖類型

QCP自帶的折線圖類型很多，具體我們可以參看QCPScatterStyle::ScatterShape這個枚舉類型有多少

void ESMPMultiPlot::SetGraphScatterStyle(int index, int style)
{
	QList<QCPGraph *> graphs = axisRect()->graphs();
	if (graphs.size() != 0 && index < graphs.size())
	{
		QCPGraph * graph = graphs.at(0);
		graph->setScatterStyle(QCPScatterStyle::ScatterShape(style));
	}
}

6、其他函數

還有一些其他的方法，比如保存圖表、獲取圖表坐標、設置圖表顏色等這里就不細講了，文章篇幅所限，不能一一的都貼出來，有需要的伙伴可以聯系我，提供功能定制。

四、測試方式

1、測試工程

控件我們將的差不多了，這里把測試的代碼放出來，大家參考下，首先測試工程截圖如下所示，我們的測試代碼，大多數都是寫在了main函數中。

2、測試文件

這里簡單說名下，我們的這個文件用途，第一列Time是代表了x軸的時間，而第二列開始的數據都是我們的折線圖，一列數據代表一條折線圖，並且列的名稱就是我們折線圖左側的名稱；列名稱括號里的單位就是折線圖右側的單位。

3、測試代碼

限於篇幅，這里我還是把無關的代碼刪減了很多，需要完整的源碼的可以聯系我。

void ESMultiPlot::LoadData()
{
	ESCsvDBOperater * csvDBOperater = new ESCsvDBOperater(nullptr);
	csvDBOperater->loadCSVFile(qApp->applicationDirPath() + "\\temp\\test31.csv");
	QStringList names = csvDBOperater->getCSVNames();

	auto callback = [this, names](const QString & name, const QVector<double> & data){
	    添加圖表數據
	};

	ui->widget->SetGraphCount(names.size() - 1);
	for (int i = 0; i < names.size(); ++i)
	{
		csvDBOperater->receiveData(names[i], callback);
	}

	double start = csvDBOperater->getStartTime();
	double end = csvDBOperater->getEndTime();

	csvDBOperater->receiveData(names[2], 10.201, 10.412, callback);
	QVector<double> tiems = csvDBOperater->getRangeTimeDatas(10.201, 10.412);

	ui->widget->SetGraphKeyRange(start, end);
}

五、相關文章

1. QCustomplot使用分享(一) 能做什么事
2. QCustomplot使用分享(二) 源碼解讀
3. QCustomplot使用分享(三) 圖
4. QCustomplot使用分享(四) QCPAbstractItem
5. QCustomplot使用分享(五) 布局
6. QCustomplot使用分享(六) 坐標軸和網格線
7. QCustomplot使用分享(七) 層(完結)

六、總結

QCustomPlot是一個非常強大的繪圖類，並且效率很高，對效率要求較高的程序都可以使用。

本篇文章是繼前7篇講解QCP后的第一篇使用案例，后續還會陸續提供更多復雜的功能。

這個控件已經被我封裝成一個dll，如果有需要的小伙伴可以加我咨詢

七、關於美化

因為我這里的程序都是測試程序，因此都是使用的原生效果，如果有需要美化的同學，或者客戶，我也可以提供定制美化功能，歡迎咨詢。

如果您覺得文章不錯，不妨給個 打賞，寫作不易，感謝各位的支持。您的支持是我最大的動力，謝謝！！！

---

很重要--轉載聲明

1. 本站文章無特別說明，皆為原創，版權所有，轉載時請用鏈接的方式，給出原文出處。同時寫上原作者：朝十晚八 or Twowords

2. 如要轉載，請原文轉載，如在轉載時修改本文，請事先告知，謝絕在轉載時通過修改本文達到有利於轉載者的目的。

---