QCustomplot 绘制图表-加载cvs文件

最新推荐文章于 2024-08-02 17:07:25 发布
最新推荐文章于 2024-08-02 17:07:25 发布
阅读量559 收藏 5
点赞数 1
分类专栏： Qt
原文链接：https://www.cnblogs.com/swarmbees/p/10962588.html
版权

一、概述

之前做过一款金融产品，名字叫做财联社，感兴趣的可以瞅一眼财联社-产品展示，由于需要画复杂的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);
}
小玩龙
关注
专栏目录
qcustomplot 游标吸附_QCustomplot使用分享(八) 绘制图表-加载cvs文件
weixin_39765325的博客
12-22 465
一、概述之前做过一款金融产品，名字叫做财联社，感兴趣的可以瞅一眼财联社-产品展示，由于需要画复杂的k线图和一些辅助的图表，我个人调研了几个绘图库，包括：QWt、QCustomPlot、QtChart和directUI。最后各方考虑，决定使用QCustomPlot来做我们的基础绘图库，这里有几个方面的考虑首先QCP他是开源的代码只有2个文件，比较方便的可以引入我们的现有的代码代码可读性比较强，定制方...
QCustomplot使用分享(九) 绘制图表-多功能游标
朝十晚八
11-02 2507
文章目录一、概述二、效果图三、源码讲解1、源码结构2、头文件3、添加游标4、监测移动5、移动游标6、其他函数四、测试方式1、测试工程2、测试文件3、测试代码五、相关文章六、总结七、关于美化 原文链接：QCustomplot使用分享(九) 绘制图表-多功能游标 一、概述 上一篇文章QCustomplot使用分享(八) 层(完结)讲述了第一篇QCustomPlot控件的使用，主要是展示了多维度折线图，...
Qt视图场景框架开发的K线图
dongh_bfwm的博客
02-14 524
Qt视图场景框架开发的K线图
QCustomPlot
03-17
QCustomPlot库，包含使用例程，该库使用方便，直接把h文件与cpp文件加入工程就行，该库在Qt中能实现绘制图表，非常方便
QCustomPlot使用技巧
最新发布
weixin_59923145的博客
08-02 263
QCustomPlot开发笔记（二）：QCustomPlot用户交互、元素项以及特殊用法-阿里云开发者社区
Qt之QCustomPlot（图形库）
weixin_33858249的博客
07-19 2684
简述 QCustomPlot是一个基于Qt C++的图形库，用于绘制和数据可视化 - 制作漂亮的2D图 - 曲线图、趋势图、坐标图、柱状图等，并为实时可视化应用程序提供高性能服务。它没有进一步的依赖关系，并有着良好的文档记录。 QCustomPlot可以导出为各种格式，比如：PDF文件和位图（如：PNG、JPG、BMP）。 可在自...
qcustomplot
Littlehero_121的博客
10-09 530
注意：qcustomplot的画图中需要进行配置，以及更新两大步 一、首先是在基本的配置，这个主要是在构造函数中实现重新进行更新图形 Graph_Show(ui->qcustomplot); 二、实现的是配置完了，需要在定时器中进行设置 //重新更新，进行画图 UpdateGraph(ui->qcustomplot); 三、以上主要两步完成就是全部的...
QCustomplot
qq_40572129的博客
10-28 324
QCPAbstractPlottable 绘图元素：包含 折线图(QCPGraph)、曲线图(QCPCurve)、柱状图(QCPBars)、QCPStatiBox(盒子图)、QCPColorMap(色谱图)、QCPFinancial(金融图)；// false 跟踪程序主动获取最接近键的数据点，不一定准确；//如果跟踪器和一个图形衔接，调用此函数更新跟踪程序位置驻留在图形的数据，取决与键。
qcustomplot 游标吸附_QCustomplot使用分享(九) 绘制图表-多功能游标
weixin_29010003的博客
12-22 523
QCustomplot使用分享(九) 绘制图表-多功能游标目录一、概述二、效果图三、源码讲解1、源码结构2、头文件3、添加游标4、监测移动5、移动游标6、其他函数四、测试方式1、测试工程2、测试文件3、测试代码五、相关文章六、总结七、关于美化原文链接：QCustomplot使用分享(九) 绘制图表-多功能游标一、概述上一篇文章QCustomplot使用分享(八) 层(完结)讲述了第一篇QCusto...
rt73-cvs-daily.tar.gz_rt73-cvs_rt73-cvs-daily_rt73-cvs-daily.tar
09-22
标题中的"rt73-cvs-daily.tar.gz_rt73-cvs_rt73-cvs-daily_rt73-cvs-daily.tar"表明这是一个与rt73无线网卡驱动相关的源代码压缩包，其中包含了每日更新的版本。"rt73-cvs"可能是指基于CVS（Concurrent Versions ...
QcustomPlot
10-31
QcustomePlot是qt中画曲线图的一个库，可以方便的画出想要的曲线坐标图
Qt图形图像开发之高性能曲线图模块QCustomplot库详细使用方法与实例(支持动、静曲线图)
08-19
主要介绍了Qt图形图像开发之高性能曲线图模块QCustomplot库详细使用方法与实例(支持动、静曲线图),需要的朋友可以参考下
Qt开发之QCustomPlot
我智商开挂的博客
12-29 2885
1、下载安装2、添加qcustomplot.h与qcustomplot.cpp将下载文件的与复制到自己的项目文件中，复制完后点击“添加现有文件”，可以在工程中显示3、添加QCustomPlot的帮助文档到QtCreator(可加可不加)在QtCreator中，选择：工具 -> 选项 -> 帮助 -> 文档，你会看到一个加载文档模块的列表，以及添加/删除模块的按钮。点击"添加…"按钮，选择qcustomplot.qch文件。4、静态生成(控件提升)
QCustomPlot绘图
武泗海的博客
03-13 816
1.创建Qt项目 2.Qt设计师添加Widget控件，并提升为QCustomPlot . 3.解决方案-右键属性-链接器-输入-Qt5printsupport.lib 4.在uicpp文件添加： #include "QtGuiApplication1.h" QtGuiApplication1::QtGuiApplication1(QWidget *parent) : QMain
QCustomPlot(1)-QCustomPlot
m晴朗的博客
11-01 1156
为此，你可以创建一个 QCPSelectionRect 的子类，进行必要的自定义，然后使用此方法将其设置为 QCustomPlot 实例的选择矩形。一旦用户停止拖动，最后的重新绘制将使用正常的抗锯齿来恢复高质量的图像。这里的QCPAbstractPlottable是所有可绘制对象的基类，所以返回的列表可以包含各种类型的可绘制对象，如线、点或其他图形元素。例如，用户可能在交互式图中选择了某些线或点，然后你可以使用这个函数来获取这些已选择的元素，进而执行一些操作，如修改它们的属性、删除它们或执行其他任务。
cvs文件某一列数据绘制词云图
05-18
要绘制 CSV 文件中某一列数据的词云图，可以按照以下步骤操作： 1. 使用 pandas 库读取 CSV 文件，将数据读取到 DataFrame 中。 ```python import pandas as pd data = pd.read_csv('filename.csv', encoding='utf-8') ``` 2. 选择要绘制词云图的列。 ```python column = data['column_name'] ``` 3. 将选定列的数据转换为字符串形式，以便生成词云图。 ```python text = ''.join(column.astype(str)) ``` 4. 使用 jieba 库对文本进行分词处理。 ```python import jieba words = jieba.cut(text) ``` 5. 将分词结果转换为列表形式，并过滤掉停用词。 ```python stopwords = ['的', '是', '在', '这', '了', '有', '就', '和', '也', '不', '要', '我', '你', '他', '她', '我们', '你们', '他们', '她们'] word_list = [word for word in words if word not in stopwords] ``` 6. 使用 wordcloud 库生成词云图。 ```python from wordcloud import WordCloud import matplotlib.pyplot as plt wordcloud = WordCloud(width=800, height=600, background_color='white').generate(' '.join(word_list)) plt.imshow(wordcloud) plt.axis('off') plt.show() ``` 这样就可以将 CSV 文件中某一列数据绘制成词云图了。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值