QCustomplot使用分享(八) 绘制图表-加载cvs文件

目录

一、概述

之前做过一款金融产品，名字叫做财联社，感兴趣的可以瞅一眼，由于需要画复杂的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，如果有需要的小伙伴可以加我咨询

七、关于美化

因为我这里的程序都是测试程序，因此都是使用的原生效果，如果有需要美化的同学，或者客户，我也可以提供定制美化功能，欢迎咨询。

---

有疑问可以留言，欢迎咨询

---

转载声明：本站文章无特别说明，皆为原创，版权所有，转载请注明： or twowords

---