C/C++ QT QChart 繪製元件應用

lyshark發表於2021-11-19
C++QT元件

QtCharts 元件是QT中提供圖表繪製的模組，該模組可以方便的繪製常規圖形，Qtcharts 元件基於GraphicsView模式實現，其核心是QChartView和QChart的二次封裝版。

在使用繪圖模組時需要在pro檔案中包含QT += charts來引入繪圖類庫。

然後還需在標頭檔案中定義QT_CHARTS_USE_NAMESPACE巨集，這樣才可以正常的使用繪圖功能。

一般情況下我們會在mainwindows.h標頭檔案中增加如下程式碼段。

#include <QMainWindow>
#include <QtCharts>
QT_CHARTS_USE_NAMESPACE

// 解決MSVC編譯時，介面漢字亂碼的問題
#if _MSC_VER >= 1600
#pragma execution_character_set("utf-8")
#endif

由於QT中不存在單獨的繪圖畫布，因此在繪圖前我們需要在窗體中放入一個graphicsView元件。

並在該元件上右鍵將其提升為QChartView

輸入需要提升的元件名稱，即可將該元件提升為全域性繪圖元件。


繪製折線圖: 折線圖的使用非常廣泛，如下程式碼我們首先使用InitChart()將畫布初始化，接著呼叫SetData()實現在畫布中填充資料，完整程式碼如下。

#include "mainwindow.h"
#include "ui_mainwindow.h"

// 初始化Chart圖表
void MainWindow::InitChart()
{
    // 建立圖表的各個部件
    QChart *chart = new QChart();
    chart->setTitle("系統效能統計圖");

    // 將Chart新增到ChartView
    ui->graphicsView->setChart(chart);
    // this->setCentralWidget( ui->graphicsView);
    ui->graphicsView->setRenderHint(QPainter::Antialiasing);

    // 設定圖表主題色
    ui->graphicsView->chart()->setTheme(QChart::ChartTheme(0));

    // 建立曲線序列
    QLineSeries *series0 = new QLineSeries();
    QLineSeries *series1 = new QLineSeries();

    series0->setName("一分鐘負載");
    series1->setName("五分鐘負載");

    // 序列新增到圖表
    chart->addSeries(series0);
    chart->addSeries(series1);

    // 其他附加引數
    series0->setPointsVisible(false);       // 設定資料點可見
    series1->setPointLabelsVisible(false);  // 設定資料點數值可見

    // 建立座標軸
    QValueAxis *axisX = new QValueAxis;    // X軸
    axisX->setRange(1, 100);               // 設定座標軸範圍
    axisX->setTitleText("X軸標題");         // 標題
    axisX->setLabelFormat("%d %");         // 設定x軸格式
    axisX->setTickCount(3);               // 設定刻度
    axisX->setMinorTickCount(3);

    QValueAxis *axisY = new QValueAxis;    // Y軸
    axisY->setRange(0, 100);               // Y軸範圍(-1 - 20)
    axisY->setTitleText("Y軸標題");         // 標題

    // 設定X於Y軸資料集
    chart->setAxisX(axisX, series0);   // 為序列設定座標軸
    chart->setAxisY(axisY, series0);

    chart->setAxisX(axisX, series1);   // 為序列設定座標軸
    chart->setAxisY(axisY, series1);

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

// 為序列生成資料
void MainWindow::SetData()
{
    // 獲取指標
    QLineSeries *series0=(QLineSeries *)ui->graphicsView->chart()->series().at(0);
    QLineSeries *series1=(QLineSeries *)ui->graphicsView->chart()->series().at(1);

    // 清空圖例
    series0->clear();
    series1->clear();

    // 賦予資料
    qreal t=0,intv=1;
    for(int i=1;i<100;i++)
    {
       series0->append(t,i);       // 設定軸粒度以及資料
       series1->append(t,i+10);    // 此處用隨機數替代
       t+=intv;                    // X軸粒度
    }
}

// 將新增的widget控制元件件提升為QChartView類
MainWindow::MainWindow(QWidget *parent) :QMainWindow(parent),ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    InitChart();
    SetData();
}

MainWindow::~MainWindow()
{
    delete ui;
}

// 圖例點選後顯示與隱藏線條
void MainWindow::on_LegendMarkerClicked()
{
    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;
    }
}

效果如下所示：


繪製餅狀圖: 餅狀圖用於統計資料的集的佔用百分比，其繪製方式與折線圖基本一致，程式碼如下。

#include "mainwindow.h"
#include "ui_mainwindow.h"

// 餅狀圖A
void MainWindow::printA()
{
    // 構造資料 [已用CPU 60%] [剩餘CPU 40%]
    QPieSlice *slice_1 = new QPieSlice(QStringLiteral("已使用"), 0.6, this);
    slice_1->setLabelVisible(true);

    QPieSlice *slice_2 = new QPieSlice(QStringLiteral("可用"), 0.4, this);
    slice_2->setLabelVisible(true);

    // 將兩個餅狀分割槽加入series
    QPieSeries *series = new QPieSeries(this);
    series->append(slice_1);
    series->append(slice_2);

    // 建立Chart畫布
    QChart *chart = new QChart();
    chart->addSeries(series);
    chart->setAnimationOptions(QChart::AllAnimations); // 設定顯示時的動畫效果
    chart->setTitle("系統CPU利用率");

    // 將引數設定到畫布
    ui->graphicsView->setChart(chart);
    ui->graphicsView->setRenderHint(QPainter::Antialiasing);
    ui->graphicsView->chart()->setTheme(QChart::ChartTheme(0));
}

// 餅狀圖B
void MainWindow::printB()
{
    // 構造資料 [C盤 20%] [D盤 30%] [E盤 50%]
    QPieSlice *slice_c = new QPieSlice(QStringLiteral("C盤"), 0.2, this);
    slice_c->setLabelVisible(true);

    QPieSlice *slice_d = new QPieSlice(QStringLiteral("D盤"), 0.3, this);
    slice_d->setLabelVisible(true);

    QPieSlice *slice_e = new QPieSlice(QStringLiteral("E盤"),0.5,this);
    slice_e->setLabelVisible(true);

    // 將兩個餅狀分割槽加入series
    QPieSeries *series = new QPieSeries(this);
    series->append(slice_c);
    series->append(slice_d);
    series->append(slice_e);

    // 建立Chart畫布
    QChart *chart = new QChart();
    chart->addSeries(series);
    chart->setAnimationOptions(QChart::AllAnimations); // 設定顯示時的動畫效果
    chart->setTitle("系統磁碟資訊");

    // 將引數設定到畫布
    ui->graphicsView_2->setChart(chart);
    ui->graphicsView_2->setRenderHint(QPainter::Antialiasing);
    ui->graphicsView_2->chart()->setTheme(QChart::ChartTheme(3));   // 設定不同的主題
}

// 將新增的widget控制元件件提升為QChartView類
MainWindow::MainWindow(QWidget *parent) :QMainWindow(parent),ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    printA();
    printB();
}

MainWindow::~MainWindow()
{
    delete ui;
}

效果如下所示：


繪製柱狀圖: 柱狀圖可用於一次展示多個使用者資料，大體是使用上與折線圖大體一致，其程式碼如下:

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent) :QMainWindow(parent),ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    // 建立人名
    QBarSet *set0 = new QBarSet("張三");
    QBarSet *set1 = new QBarSet("李四");
    QBarSet *set2 = new QBarSet("王五");
    QBarSet *set3 = new QBarSet("蘇三");
    QBarSet *set4 = new QBarSet("劉麻子");

    // 分別為不同人新增bu不同資料集
    *set0 << 1 << 2 << 8 << 4 << 6 << 6;
    *set1 << 5 << 2 << 5 << 4 << 5 << 3;
    *set2 << 5 << 5 << 8 << 15 << 9 << 5;
    *set3 << 8 << 6 << 7 << 5 << 4 << 5;
    *set4 << 4 << 7 << 5 << 3 << 3 << 2;

    // 將資料集關聯到series中
    QBarSeries *series = new QBarSeries();
    series->append(set0);
    series->append(set1);
    series->append(set2);
    series->append(set3);
    series->append(set4);

    // 增加頂部提示
    QChart *chart = new QChart();
    chart->addSeries(series);
    chart->setTitle("當前人數統計");
    chart->setAnimationOptions(QChart::SeriesAnimations);

    // 建立X軸底部提示
    QStringList categories;
    categories << "週一" << "週二" << "週三" << "週四" << "週五" << "週六";

    QBarCategoryAxis *axis = new QBarCategoryAxis();
    axis->append(categories);
    chart->createDefaultAxes();
    chart->setAxisX(axis, series);

    chart->legend()->setVisible(true);
    chart->legend()->setAlignment(Qt::AlignBottom);

    // 將引數設定到畫布
    ui->graphicsView->setChart(chart);
    ui->graphicsView->setRenderHint(QPainter::Antialiasing);
    ui->graphicsView->chart()->setTheme(QChart::ChartTheme(0));
}

MainWindow::~MainWindow()
{
    delete ui;
}

效果如下所示：

相關文章