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則恢復到默認大小；

總結

以上是生活随笔為你收集整理的C++ Qt开发：Charts折线图绑定事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。