2. 程式人生 > >QCustomplot使用分享(八) 繪製圖表-載入cvs檔案

QCustomplot使用分享(八) 繪製圖表-載入cvs檔案

阿新 • • 發佈：2019-06-02

目錄

  • 一、概述
  • 二、效果圖
  • 三、原始碼講解
    • 1、原始碼結構
    • 2、標頭檔案
    • 3、移動遊標
    • 4、設定座標軸矩形個數
    • 5、新增圖表資料
    • 6、設定折線圖型別
    • 6、其他函式
  • 四、測試方式
    • 1、測試工程
    • 2、測試檔案
    • 3、測試程式碼
  • 五、相關文章
  • 六、總結
  • 七、關於美化

一、概述

之前做過一款金融產品，名字叫做財聯社，感興趣的可以瞅一眼財聯社-產品展示，由於需要畫複雜的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

相關推薦

QCustomplot使用分享(八) 繪製圖表-載入cvs檔案

目錄 一、概述 二、效果圖 三、原始碼講解 1、原始碼結構 2、標頭檔案 3、移動遊標 4、設定座標軸矩形個數 5、新增圖表資料

QCustomplot使用分享(九) 繪製圖表-多功能遊標

目錄 一、概述 二、效果圖 三、原始碼講解 1、原始碼結構 2、標頭檔案 3、新增遊標 4、監測移動 5、移動遊標 6、其他函式

Win7，64位下Python 讀取csv檔案(Excel轉化的)並繪製圖表

參考程式碼： 依賴的包： 1.matplot 2.numpy Python 讀取csv檔案(Excel轉化的)並繪製圖表。 程式碼如下： from __future__ import print_function from matplotlib import mla

Win7，64位下Python讀取Excel檔案並繪製圖表

1、安裝xlrd的whl檔案：     Python讀取Excel使用xlrd，到官網https://pypi.python.org/pypi/xlrd下載xlrd-1.0.0-py3-none-any.whl安裝。     在C:\Program Files\Python

圖表控制元件TeeChart乾貨分享（繪製2D、3D實時曲線---VC++示例原始碼--網路首發）

最近接手了一個專案，其中涉及到MFC和實時曲線顯示的問題，由於我之前從未接觸過此類技術，現學現搞，把其間用到的覺得對初學者有用的東西，總結一下。 尤其是關於TeeChart控制元件部分，網上資料零碎，且很多不全面，程式碼難以使用。我苦尋數週在外國一些網站上尋到了一些有用

MySQL-載入配置檔案並通過配置檔案連線資料庫

package demo5; import java.io.IOException; import java.io.InputStream; import java.sql.Connection; import java.sql.DriverManager; import java.sql.S

關於apk加殼之動態載入dex檔案

由於自己之前做了一個關於手機令牌的APK軟體，在實現的過程中儘管使用了native so進行一定的邏輯演算法保護，但是在自己逆向破解的過程中發現我的手機令牌關鍵資料能夠“輕易地”暴露出來，所以我就想進一步的對其進行加固。於是，我使用的網上常用的梆梆加固、愛加密和阿里的聚安全應用來對我的apk進行一個

【經驗分享】如何將一個PDF檔案拆分成多個檔案

從事於辦公的夥伴每天都需要處理到各式各樣的辦公檔案，PDF格式的檔案就是其中的一種，有時候遇到一份PDF檔案頁面比較多，處理起來很麻煩的話我們該用什麼樣的方法呢？在這裡可以將一個PDF檔案拆分成多個檔案，這樣子就方便了很多。下面就將這種方法分享給大家！以供大家參考。   &n

使用mysqladmin --help檢視mysql是從哪兒載入配置檔案的

[email protected]:~# mysqladmin --help mysqladmin Ver 8.42 Distrib 5.7.21, for Linux on x86_64 Copyright (c) 2000, 2018, Oracle and/or its a

八、系統中的檔案傳輸

scp，rsync可在兩臺主機之間實現檔案傳輸，scp我們在學習ssh的時候就有接觸過 scp 上傳 scp  本地檔案  遠端使用者@遠端主機IP:遠端主機目錄 下載 scp  遠端使用者@遠端主機IP:遠端主機檔案  本機目錄 1 下載192.168.239.129桌面的t

AngularJS進階(三十八)上拉載入問題解決方法

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

maven專案不載入頁面檔案的

1.maven 的pom.xml可能有類似以下的程式碼 （1）不過濾java包裡的xml和properties檔案（預設只編譯.java檔案，其他都被過濾掉），不是導致maven專案不編譯頁面檔案的原因 <resource> <directory&

如何使用Excel繪製圖表？

  通過如何使用Excel進行資料分析，我們已經學會了從原始資料中得到分下面的分析結果：統計出每個城市的資料分析師招聘數量。     那麼，問題就來了。有了資料分析結果以後，如何展示成圖表呢？   我們按下面圖片中標出的

jvm載入class檔案機制j

1、載入類檔案      a、讀取class檔案，從jar包、war包、class檔案、jsp檔案等處都可以。           a.1、採用雙親委派機制載入類，由classLoader和其子類完成，支援自定義

利用Iterator讀取cvs檔案

平時讀取csv檔案都是用while迴圈，最近在看文件時發現一個新方法：利用iterator <?php namespace demo\test; use Iterator; class CsvFileIterator implements Iterator { private $fil

Nginx下修改php.ini後重新載入配置檔案命令 Nginx下修改php.ini後重新載入配置檔案命令

Nginx下修改php.ini後重新載入配置檔案命令   修改php.ini後 如，我的 php.ini 檔案是放在 /etc/php.ini php 所在目錄是 /www/Linux/php-5.2.17 修改 php.ini 後要用 php-f

使用jquery的load方法載入本地檔案

1. 方法一（圖一）：使用chrome瀏覽器，關掉瀏覽器，通過截圖的兩條命令執行chrome瀏覽器，再執行test.html檔案。方法二（圖二）：選擇chrome瀏覽器快捷方式，右鍵選擇屬性，再點選快捷方式，在目標"C:\Program Files (x86)\Google\Chrome\Appli

如何在不重啟 JVM 的情況下重新載入證書檔案？

某種情況下需要動態下載證書檔案後使用 SSL 訪問某服務，但由於 JVM 使用預設的證書訪問新服務，該證書在 JVM 啟動的時候載入，那時還沒有新服務的證書，所以會報 ValidatorException，詳情： 16:44:27,338 ERROR [Htt

分享知識-快樂自己：Struts2檔案上傳及檔案下載

1）Struts2單檔案上傳   action：類檔案 package com.mlq.action; import com.opensymphony.xwork2.ActionSupport; import org.apache.commons.io.FileUtils; imp

Untiy動態載入.dll檔案

這裡先說一下反射     System.Reflection名稱空間      （1） AppDomain:應用程式域，可以將其理解為一組程式集的邏輯容器