qcustomplot 游标吸附_QCustomplot使用分享(八) 绘制图表-加载cvs文件

一、概述

之前做过一款金融产品，名字叫做财联社，感兴趣的可以瞅一眼财联社-产品展示，由于需要画复杂的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);