一、概述

之前做过一款金融产品，名字叫做财联社，感兴趣的可以瞅一眼财联社-产品展示，由于需要画复杂的k线图和一些辅助的图表，我个人调研了几个绘图库，包括：QWt、QCustomPlot、QtChart和directUI。最后各方考虑，决定使用QCustomPlot来做我们的基础绘图库，这里有几个方面的考虑

首先QCP他是开源的代码只有2个文件，比较方便的可以引入我们的现有的代码代码可读性比较强，定制方便

当我们的绘图库选定后，理所当然的就是去研究我们这个库了，因此我也花了几天的时间去研究了我们这个绘图库，并做了一个简单的demo，感兴趣的可以去看之前写的文章，demo都在CSDN上放着，如果没有分需要我发的可以留言。

之前讲解的文章我在后边相关文章小节已经给出，有想法的同学也可以直接先去看之前的文章，这样更容易理解

二、效果图

如下图所示，是我做的一个测试效果图，途中包括一个简单的折线图和游标，折线图的显示模式有十几种效果，具体可以看QCustomplot使用分享(一) 能做什么事这篇文章里的截图，这里我就不在贴出。

这个效果图只是展示了一部分简单的功能，我封装的绘图控件实际上主要是用于用于加载cvs文件，然后显示相应的图表，当然了，如果你想自己获取数据添加给图表也是支持的。

最后该绘图控件还提供了很多接口，可以获取当前绘图数据，比如：

游标对于的x值、y值，最多提供了2个游标获取两个游标之间的x值数据段获取两个游标之间的y值数据段，并且可以指定折线图设置折线图颜色设置折线图类型设置4个轴的标题栏名称设置游标颜色

下面的文章中我会分析下主要的接口和核心功能实现

图中的展示效果测试代码如下，代码中的关键节点就2个

构造ESCvsDBOperater类，并加载cvs文件通过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：xvoid 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();

如下代码所示，是移动游标的核心代码

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类都包括多个坐标轴矩形，而一个坐标轴矩形里又可以包含多个图表，因此我们这个控件是这样的：

一个坐标轴矩形多个QCPGraph

当我们设置的图表数量大于已有图表时，需要使用takeAt接口移除多余的图表；当我们设置的图表数据小于已有图表时，就需要添加新图表对象，添加时机是设置图表数据时

由于这个函数的代码量比较大，因此这里我删除了一些异常处理代码和设置属性代码

添加图表数据的流程可能像这面这样

首先处理数据异常添加坐标轴根据当前的折线图个数，计算当前折线图的位置和一些转换可能用的系数比率添加图表所有两侧的标题栏名称，如name和unit刷新图表

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);}

毫无疑问，添加图表数据是我们这个控件的非常重要的一个借口

如下代码所示，看我们是怎么添加数据的

首先排除数据异常情况更新图表的各个轴的名称然后给图表添加数据如果图表不存在则添加一个新的设置图表数据设置坐标轴信息设置折线图对应的标题栏名称

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);}

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));	}}

还有一些其他的方法，比如保存图表、获取图表坐标、设置图表颜色等这里就不细讲了，文章篇幅所限，不能一一的都贴出来，有需要的伙伴可以联系我，提供功能定制。

点击领取Qt学习资料+视频教程~「链接」

四、测试方式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);}

原作者：朝十晚八 or Twowords

原文转载：