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

时间  2019-11-06
标签 qcustomplot 使用 分享 绘制 图表 加载 cvs 文件 繁體版
原文   原文链接

目录html

1、概述

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

  1. 首先QCP他是开源的
  2. 代码只有2个文件，比较方便的能够引入咱们的现有的代码
  3. 代码可读性比较强，定制方便

当咱们的绘图库选定后，理所固然的就是去研究咱们这个库了，所以我也花了几天的时间去研究了咱们这个绘图库，并作了一个简单的demo，感兴趣的能够去看以前写的文章，demo都在CSDN上放着，若是没有分须要我发的能够留言。函数

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

2、效果图

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

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

最后该绘图控件还提供了不少接口，能够获取当前绘图数据，好比：this

  1. 游标对于的x值、y值，最多提供了2个游标
  2. 获取两个游标之间的x值数据段
  3. 获取两个游标之间的y值数据段，而且能够指定折线图
  4. 设置折线图颜色
  5. 设置折线图类型设置4个轴的标题栏名称
  6. 设置游标颜色

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

图中的展现效果测试代码以下，代码中的关键节点就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使用分享(一) 能作什么事文章中观看code

3、源码讲解

一、源码结构

如图所示，是工程的头文件截图，图中的文件数量比较多，可是对外咱们使用的可能只是一个ESMPMultiPlot类，这个类中提供了不少接口，足够咱们使用，固然了若是有特殊需求的话，咱们还能够进行提供定制






二、头文件

以下是头文件中的接口，我只是把相关的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();

三、移动游标

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

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获取原始值，咱们还须要使用一个逆向公式进行转换回去。

四、设置坐标轴矩形个数

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

五、添加图表数据

毫无疑问，添加图表数据是咱们这个控件的很是重要的一个借口
以下代码所示，看咱们是怎么添加数据的

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

六、设置折线图类型

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

六、其余函数

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

4、测试方式

一、测试工程

控件咱们将的差很少了，这里把测试的代码放出来，你们参考下，首先测试工程截图以下所示，咱们的测试代码，大多数都是写在了main函数中。






二、测试文件

这里简单说名下，咱们的这个文件用途，第一列Time是表明了x轴的时间，而第二列开始的数据都是咱们的折线图，一列数据表明一条折线图，而且列的名称就是咱们折线图左侧的名称；列名称括号里的单位就是折线图右侧的单位。






三、测试代码

限于篇幅，这里我仍是把无关的代码删减了不少，须要完整的源码的能够联系我。

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

5、相关文章

  1. QCustomplot使用分享(一) 能作什么事
  2. QCustomplot使用分享(二) 源码解读
  3. QCustomplot使用分享(三) 图
  4. QCustomplot使用分享(四) QCPAbstractItem
  5. QCustomplot使用分享(五) 布局
  6. QCustomplot使用分享(六) 坐标轴和网格线
  7. QCustomplot使用分享(七) 层(完结)

6、总结

QCustomPlot是一个很是强大的绘图类，而且效率很高，对效率要求较高的程序均可以使用。

本篇文章是继前7篇讲解QCP后的第一篇使用案例，后续还会陆续提供更多复杂的功能。

这个控件已经被我封装成一个dll，若是有须要的小伙伴能够加我咨询

7、关于美化

由于我这里的程序都是测试程序，所以都是使用的原生效果，若是有须要美化的同窗，或者客户，我也能够提供定制美化功能，欢迎咨询。

若是您以为文章不错，不妨给个 打赏，写做不易，感谢各位的支持。您的支持是我最大的动力，谢谢！！！



很重要--转载声明

  1. 本站文章无特别说明，皆为原创，版权全部，转载时请用连接的方式，给出原文出处。同时写上原做者：朝十晚八 or Twowords

  2. 如要转载，请原文转载，如在转载时修改本文，请事先告知，谢绝在转载时经过修改本文达到有利于转载者的目的。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程