一、概述
之前做过一款金融产品,名字叫做财联社,感兴趣的可以瞅一眼财联社-产品展示,由于需要画复杂的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 & 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 GetGraphKey(double);
void SetGraphValue(int, const QString &, const QString &, const QVector &);
void SetGraphScatterStyle(int, int);