C++ Qt開發：Charts折線圖繫結事件

lyshark發表於2023-12-24
C++QT事件

Qt 是一個跨平臺C++圖形介面開發庫，利用Qt可以快速開發跨平臺窗體應用程式，在Qt中我們可以透過拖拽的方式將不同元件放到指定的位置，實現圖形化開發極大的方便了開發效率，本章將重點介紹QCharts折線圖的常用方法及靈活運用。

在上一篇文章中筆者介紹了關於QCharts繪圖元件的詳細使用方法及介面，本章將繼續為繪圖元件繫結事件，通常在未繫結事件的圖形上所有的元素都是被禁用狀態的，我們無法直接操作這些功能，透過繫結圖形元件事件將可以實現對圖形的各種操作模式，例如可以控制圖形的大小，控制線條的顯示與消除等。

首先，我們來實現動態顯示與隱藏線條功能，還是使用之前的程式碼這裡稍作改進增加一個十五分鐘負載統計，接著我們在MainWindow主建構函式中透過markers()得到所有的標籤，然後先呼叫disconnect()斷開訊號的連線，接著在使用connect()將當前上方三個按鈕進行繫結，當按鈕被點選則會觸發on_LegendMarkerClicked()槽函式；

// 圖例被點選後觸發
foreach (QLegendMarker* marker, chart->legend()->markers())
{
   QObject::disconnect(marker, SIGNAL(clicked()), this, SLOT(on_LegendMarkerClicked()));
   QObject::connect(marker, SIGNAL(clicked()), this, SLOT(on_LegendMarkerClicked()));
}

接著，我們需要來實現on_LegendMarkerClicked()槽函式的功能，這裡需要介紹一個類，QLegendMarker 類是 Qt Charts 模組中用於表示圖例標記的基類。這個類有幾個派生類，每個派生類代表一種型別的圖例標記。

以下是一些常見的派生類：

  1. QLegendMarker::LegendMarkerTypeXY：
    • 代表 XY 資料系列的圖例標記，通常用於折線圖、散點圖等。
  2. QLegendMarker::LegendMarkerTypeBar：
    • 代表柱狀圖資料系列的圖例標記。
  3. QLegendMarker::LegendMarkerTypePieSlice：
    • 代表餅圖資料系列的圖例標記。
  4. QLegendMarker::LegendMarkerTypeArea：
    • 代表面積圖資料系列的圖例標記。

這些型別分別對應於不同種類的資料系列，因為不同型別的資料系列可能需要不同的圖例標記。當你處理 QLegendMarker 的點選事件時，透過檢查標記的型別，你可以判斷點選的是哪一種型別的圖例標記，並作出相應的處理，比如切換資料系列的可見性。

// 在槽函式中獲取圖例標記的型別
void MainWindow::on_LegendMarkerClicked()
{
    QLegendMarker* marker = qobject_cast<QLegendMarker*>(sender());

    // 獲取圖例標記的型別
    QLegendMarker::LegendMarkerType type = marker->type();

    // 根據標記的型別執行相應的操作
    switch (type)
    {
        case QLegendMarker::LegendMarkerTypeXY:
            // 處理 XY 資料系列的圖例標記
            break;
        case QLegendMarker::LegendMarkerTypeBar:
            // 處理柱狀圖資料系列的圖例標記
            break;
        case QLegendMarker::LegendMarkerTypePieSlice:
            // 處理餅圖資料系列的圖例標記
            break;
        case QLegendMarker::LegendMarkerTypeArea:
            // 處理面積圖資料系列的圖例標記
            break;
        default:
            break;
    }
}

上述示例中，我們透過 QLegendMarker::type() 方法獲取了圖例標記的型別，並根據型別執行相應的操作。其中marker變數則是使用者點選過的標籤指標，這可以幫助你在處理圖例標記點選事件時更靈活地根據標記的型別進行不同的邏輯處理。

為了實現點選後隱藏與顯示特定線條，我們可以這樣來實現，首先透過marker得到被點選案例的指標，透過marker->type()來檢查型別是否為LegendMarkerTypeXY，如果是就透過根據資料可見性來設定透明度，也就是如果可見那就不可見，如果不可見就可見的邏輯。資料系列不可見，透明度 alpha 設定為 0.5，否則保持為 1.0。

// 槽函式：處理圖例標記點選事件，顯示或隱藏與之關聯的資料系列
void MainWindow::on_LegendMarkerClicked()
{
    // 將傳送者強制轉換為 QLegendMarker 型別
    QLegendMarker* marker = qobject_cast<QLegendMarker*>(sender());

    // 檢查標記的型別
    switch (marker->type())
    {
        case QLegendMarker::LegendMarkerTypeXY:
        {
            // 切換資料系列的可見性
            marker->series()->setVisible(!marker->series()->isVisible());

            // 設定標記可見
            marker->setVisible(true);

            // 根據資料系列的可見性設定標記的透明度
            qreal alpha = 1.0;
            if (!marker->series()->isVisible())
                alpha = 0.5;

            // 調整標記的標籤刷顏色透明度
            QColor color;
            QBrush brush = marker->labelBrush();
            color = brush.color();
            color.setAlphaF(alpha);
            brush.setColor(color);
            marker->setLabelBrush(brush);

            // 調整標記的刷顏色透明度
            brush = marker->brush();
            color = brush.color();
            color.setAlphaF(alpha);
            brush.setColor(color);
            marker->setBrush(brush);

            // 調整標記的畫筆顏色透明度
            QPen pen = marker->pen();
            color = pen.color();
            color.setAlphaF(alpha);
            pen.setColor(color);
            marker->setPen(pen);

            break;
        }
        default:
            break;
    }
}

總體而言，這段程式碼的作用是在圖例標記被點選時，切換與之關聯的資料系列的可見性，並透過調整標記的顏色透明度來反映資料系列的可見性狀態。透明度的調整使得圖例標記在圖表中的可視效果更符合資料系列的可見性。如下圖所示，我們只保留一個十五分鐘負載，將前兩個隱藏掉。

接著，我們繼續增加一個折線圖動態預覽功能，透過使用該功能可以對特定區域進行選擇放大縮小，讀者可透過鍵盤案件進行縮放也可透過滑鼠滾輪和左右鍵選中縮放，該功能在圖形預覽中也是最常見的。

為了實現該功能，需要先來了解三個常用鍵盤滑鼠庫，第一個是QMouseEvent該庫主要用於實現對滑鼠左鍵或右鍵的單擊、釋放等操作的監控，對滑鼠滾輪的響應則透過QWheeEvent來監控，而鍵盤事件則透過QKeyEvent類來監控。

由於鍵盤滑鼠事件很簡單所以此處將不再重點介紹如何實現，在使用這些事件處理函式時，你只需要在你的類中進行重寫（override）以提供特定的實現。以下是這些事件處理函式的簡要說明：

  1. 滑鼠按下事件 (mousePressEvent)：
    • 當滑鼠按下時觸發。在該函式中，你可以處理滑鼠按下時的邏輯，如獲取滑鼠座標、進行拖拽等。
  2. 滑鼠釋放事件 (mouseReleaseEvent)：
    • 當滑鼠釋放時觸發。你可以在該函式中處理滑鼠釋放時的邏輯，如執行點選操作。
  3. 滑鼠移動事件 (mouseMoveEvent)：
    • 當滑鼠移動時觸發。在該函式中，你可以處理滑鼠移動時的邏輯，如實時更新滑鼠位置、進行拖拽操作等。
  4. 滑鼠滾輪事件 (wheelEvent)：
    • 當滑鼠滾輪滾動時觸發。你可以在該函式中處理滑鼠滾輪事件，如放大縮小、滾動檢視等。
  5. 鍵盤按下事件 (keyPressEvent)：
    • 當鍵盤按鍵被按下時觸發。在該函式中，你可以處理鍵盤按下時的邏輯，如捕捉特定按鍵的按下。
  6. 鍵盤抬起事件 (keyReleaseEvent)：
    • 當鍵盤按鍵被抬起時觸發。你可以在該函式中處理鍵盤抬起時的邏輯，如釋放某個按鍵的狀態。

在附件中筆者將程式碼整理成了Keyboard and mouse檔案，讀者可自行開啟該檔案編譯執行觀察鍵盤滑鼠事件是如何被重寫的。

要對一個QChart圖表進行滑鼠和按鍵操作，需要在QChartView元件裡對滑鼠和按鍵事件進行處理，這就需要自定義一個從QChartView繼承的類，此處我們自定義一個QWChartView類，它從QChartView繼承而來，對滑鼠和按鍵事件進行處理QWChartView類的定義如下:

#ifndef QWCHARTVIEW_H
#define QWCHARTVIEW_H
#include <QMouseEvent>
#include <QWheelEvent>
#include <QKeyEvent>
#include <iostream>
#include <QtCharts>
#include <QChartView>

QT_CHARTS_USE_NAMESPACE

class QWChartView : public QChartView
{
    Q_OBJECT

private:
    QPoint  beginPoint;  // 選擇矩形區的起點
    QPoint  endPoint;    // 選擇矩形區的終點

protected:
    // 滑鼠左鍵按下
    void mousePressEvent(QMouseEvent *event);
    // 滑鼠移動
    void mouseMoveEvent(QMouseEvent *event);
    // 滑鼠釋放左鍵
    void mouseReleaseEvent(QMouseEvent *event);
    // 滑鼠滾輪事件
    void wheelEvent(QWheelEvent *event);
    // 按鍵事件
    void keyPressEvent(QKeyEvent *event);

public:
    explicit QWChartView(QWidget *parent = 0);
    ~QWChartView();

signals:
    // 滑鼠移動訊號在mouseMoveEvent()事件中觸發
    void mouseMovePoint(QPoint point);
};

#endif // QWCHARTVIEW_H

如下所示的程式碼是一個自定義的 Qt 圖表檢視類 QWChartView，用於處理滑鼠和鍵盤事件，實現了一些基本的互動功能。

以下是對這段程式碼的總結：

  1. 滑鼠左鍵按下 (mousePressEvent)：
    • 記錄滑鼠左鍵按下時的起始點，用於後續矩形框縮放操作。
  2. 滑鼠移動事件 (mouseMoveEvent)：
    • 發射滑鼠移動訊號，可以用於實時顯示滑鼠位置等。
  3. 滑鼠左鍵釋放 (mouseReleaseEvent)：
    • 獲取矩形框的結束點，建立矩形框，並使用 zoomIn 方法在矩形框內進行縮放。
    • 如果是右鍵點選，使用 zoomReset 方法重置縮放。
  4. 滑鼠滾輪事件 (wheelEvent)：
    • 根據滾輪滾動方向，調整 g_x 的值，然後使用 zoom 方法進行縮放。
  5. 按鍵控制 (keyPressEvent)：
    • 根據按下的鍵執行相應的操作，如放大、縮小、左移、右移、上移、下移等。
    • 特定按鍵的操作使用 zoom、scroll 或 zoomReset 方法。
  6. 建構函式 (QWChartView)：
    • 設定拖拽模式為 QGraphicsView::RubberBandDrag，啟用滑鼠追蹤。
  7. 解構函式 (~QWChartView)：
    • 解構函式為空，未新增特定的析構邏輯。

總體而言，這段程式碼實現了一個基本的圖表檢視類，支援滑鼠互動和鍵盤控制，提供了圖表的縮放、移動等功能。這樣的自定義檢視類通常用於定製圖表的互動行為，以滿足特定的應用需求。

#include "qwchartview.h"
#include <QChartView>

// 滑鼠左鍵按下
void QWChartView::mousePressEvent(QMouseEvent *event)
{
    if (event->button() == Qt::LeftButton)
    {
        // 記錄左鍵按下時的起始點
        beginPoint = event->pos();
    }

    // 呼叫基類的滑鼠按下事件處理函式
    QChartView::mousePressEvent(event);
}

// 滑鼠移動事件
void QWChartView::mouseMoveEvent(QMouseEvent *event)
{
    // 獲取當前滑鼠的位置
    QPoint point = event->pos();

    // 發射滑鼠移動訊號
    emit mouseMovePoint(point);

    // 呼叫基類的滑鼠移動事件處理函式
    QChartView::mouseMoveEvent(event);
}

// 滑鼠左鍵釋放
void QWChartView::mouseReleaseEvent(QMouseEvent *event)
{
    if (event->button() == Qt::LeftButton)
    {
        // 獲取矩形框的 endPoint
        endPoint = event->pos();

        // 建立矩形框
        QRectF rectF;
        rectF.setTopLeft(this->beginPoint);
        rectF.setBottomRight(this->endPoint);

        // 在矩形框內進行縮放
        this->chart()->zoomIn(rectF);
    }
    else if (event->button() == Qt::RightButton)
    {
        // 右鍵點選時，重置縮放
        this->chart()->zoomReset();
    }

    // 呼叫基類的滑鼠釋放事件處理函式
    QChartView::mouseReleaseEvent(event);
}

// 滑鼠滾輪事件
qint16 g_x = 0;
void QWChartView::wheelEvent(QWheelEvent *event)
{
    // 當滾輪向上滑
    if (event->delta() > 0)
    {
        g_x = g_x + 1;
        this->chart()->zoom(g_x);
    }
    // 當滾輪向下滑
    else
    {
        g_x = g_x - 1;
        this->chart()->zoom(g_x);
    }
}

// 按鍵控制
void QWChartView::keyPressEvent(QKeyEvent *event)
{
    switch (event->key())
    {
    case Qt::Key_Plus:
        // 按 "+" 鍵放大
        chart()->zoom(1.2);
        break;
    case Qt::Key_Minus:
        // 按 "-" 鍵縮小
        chart()->zoom(0.8);
        break;
    case Qt::Key_Left:
        // 按左箭頭鍵左移
        chart()->scroll(10, 0);
        break;
    case Qt::Key_Right:
        // 按右箭頭鍵右移
        chart()->scroll(-10, 0);
        break;
    case Qt::Key_Up:
        // 按上箭頭鍵上移
        chart()->scroll(0, -10);
        break;
    case Qt::Key_Down:
        // 按下箭頭鍵下移
        chart()->scroll(0, 10);
        break;
    case Qt::Key_PageUp:
        // 按 PageUp 鍵上移
        chart()->scroll(0, 50);
        break;
    case Qt::Key_PageDown:
        // 按 PageDown 鍵下移
        chart()->scroll(0, -50);
        break;
    case Qt::Key_Home:
        // 按 Home 鍵重置縮放
        chart()->zoomReset();
        break;
    default:
        // 其他鍵交給基類處理
        QGraphicsView::keyPressEvent(event);
    }
}

// 設定拖拽模式和滑鼠追蹤
QWChartView::QWChartView(QWidget *parent) : QChartView(parent)
{
    this->setDragMode(QGraphicsView::RubberBandDrag);
    this->setMouseTracking(true);
}

// 解構函式
QWChartView::~QWChartView()
{
}

執行上述程式碼，則可以透過點選頂部按鈕實現顯示隱層不同的折線圖，透過左鍵拖拽的方式則可以選擇一個矩形區域並對該區域進行放大與縮小操作，按下滑鼠右鍵則呼叫zoomReset()將圖形恢復到預設大小；

由於程式中繫結了keyPressEvent鍵盤監控事件，當按下鍵盤上下左右時則透過scroll()調整圖形的位置，透過按下小鍵盤中的+-符號則透過scroll()放大與縮小圖形，透過按下Home則恢復到預設大小；

相關文章