快捷導(dǎo)航

如何使用Qt實現(xiàn)實時數(shù)據(jù)動態(tài)繪制的折線圖效果

更新時間：2024年10月09日 09:29:09 作者：極客晨風(fēng)

使用Qt的QChartView和定時器,本教程詳細(xì)介紹了如何動態(tài)繪制折線圖,通過定時器觸發(fā)數(shù)據(jù)點的動態(tài)添加和坐標(biāo)軸范圍的自動調(diào)整,實現(xiàn)了實時更新數(shù)據(jù)的動態(tài)折線圖應(yīng)用,程序結(jié)合QLineSeries或QSplineSeries繪制折線或樣條曲線,配合動畫效果,展現(xiàn)數(shù)據(jù)變化

基于Qt的 QChartView 和定時器來動態(tài)繪制折線圖。它通過動畫的方式逐步將數(shù)據(jù)點添加到圖表上，并動態(tài)更新坐標(biāo)軸的范圍，提供了一個可以實時更新數(shù)據(jù)的折線圖應(yīng)用。以下是對代碼的詳細(xì)介紹及其功能解析：

在這里插入圖片描述

代碼概述

該程序使用Qt的 QChartView 作為圖表繪制的基礎(chǔ)，結(jié)合 QLineSeries 或 QSplineSeries 來繪制折線或樣條曲線。程序通過定時器 (QTimer) 控制數(shù)據(jù)點的動態(tài)繪制，并在繪圖過程中實時更新坐標(biāo)軸的顯示范圍。

主要功能

動態(tài)創(chuàng)建系列：可以動態(tài)創(chuàng)建多個曲線系列（QLineSeries 或 QSplineSeries），每個系列對應(yīng)一條折線或樣條曲線。
動態(tài)添加數(shù)據(jù)點：通過 addPointAnimated() 函數(shù)，可以為每個系列動態(tài)添加數(shù)據(jù)點，并通過動畫效果逐步連接新數(shù)據(jù)點。
定時更新：使用 QTimer 每隔一段時間調(diào)用 animateDrawing() 函數(shù)，逐步將新點連接到已有的曲線上。
自動調(diào)整坐標(biāo)軸范圍：在繪制過程中，如果新點超出了當(dāng)前坐標(biāo)軸范圍，坐標(biāo)軸會自動調(diào)整以適應(yīng)新的數(shù)據(jù)點。

代碼結(jié)構(gòu)

1. DynamicChart 類構(gòu)造函數(shù)

DynamicChart::DynamicChart(QWidget *parent)
    : QChartView(new QChart(), parent), m_chart(this->chart())
{
    m_chart->setTitle("Dynamic Data Plot");
    m_chart->legend()->hide();
    setRenderHint(QPainter::Antialiasing);
    // 設(shè)置圖表主題和隱藏圖例
    m_chart->setTheme(QChart::ChartTheme::ChartThemeDark);
    // 創(chuàng)建共用的坐標(biāo)軸
    axisX = new QValueAxis();
    axisX->setRange(0, 100);
    m_chart->addAxis(axisX, Qt::AlignBottom);
    axisY = new QValueAxis();
    axisY->setRange(0, 100);
    m_chart->addAxis(axisY, Qt::AlignLeft);
    // 設(shè)置定時器
    connect(&timer, &QTimer::timeout, this, &DynamicChart::animateDrawing);
    timer.setInterval(30); // 動畫更新間隔為30毫秒
    resize(500,500);
}

該構(gòu)造函數(shù)中設(shè)置了圖表的主題、坐標(biāo)軸、以及定時器，定時器的作用是每隔30毫秒觸發(fā) animateDrawing() 函數(shù)，用于動態(tài)繪制數(shù)據(jù)。

2. createSeries() 函數(shù)

void DynamicChart::createSeries(int seriesId, const QString &name)
{
#ifdef LINE
    QLineSeries *series = new QLineSeries();
#else
    QSplineSeries *series = new QSplineSeries();
#endif
    series->setName(name);
    m_chart->addSeries(series);
    // 使用共用的坐標(biāo)軸
    series->attachAxis(axisX);
    series->attachAxis(axisY);
    seriesMap.insert(seriesId, series);
}

該函數(shù)負(fù)責(zé)創(chuàng)建新的系列（折線或樣條曲線），并將其添加到圖表中。 seriesId 用于標(biāo)識不同的曲線，name 則用于顯示系列的名稱。系列將共享同一套坐標(biāo)軸。

3. addPointAnimated() 函數(shù)

void DynamicChart::addPointAnimated(int seriesId, const QPointF &point)
{
    if (!seriesMap.contains(seriesId)) return;
#ifdef LINE
    QLineSeries *series = seriesMap[seriesId];
#else
    QSplineSeries *series =seriesMap[seriesId];
#endif
    if (!series->points().isEmpty()) {
        lastPoint = series->points().last();
    } else {
        lastPoint = point; // 第一個點直接添加
        series->append(point);
    }
    newPoint = point;
    currentSeriesId = seriesId;
    currentStep = 0;
    stepsCount = 10; // 分10步完成連線
    timer.start();
}

該函數(shù)用于為指定的系列添加新點，并通過動畫效果使新點逐步出現(xiàn)在圖表上。它會計算新點與最后一個點之間的插值，并逐步繪制曲線。

4. animateDrawing() 函數(shù)

void DynamicChart::animateDrawing()
{
#ifdef LINE
    QLineSeries *series = seriesMap[currentSeriesId];
#else
    QSplineSeries *series =seriesMap[currentSeriesId];
#endif
    if (currentStep >= stepsCount) {
        timer.stop();
        series->append(newPoint);
        return;
    }
    qreal x = lastPoint.x() + (newPoint.x() - lastPoint.x()) * currentStep / stepsCount;
    qreal y = lastPoint.y() + (newPoint.y() - lastPoint.y()) * currentStep / stepsCount;
    series->append(x, y);
    // 動態(tài)更新坐標(biāo)軸
    if (x > axisX->max()) {
        axisX->setMax(x + 10);
    }
    if (y > axisY->max() || y < axisY->min()) {
        axisY->setMax(qMax(y + 10, axisY->max()));
        axisY->setMin(qMin(y - 10, axisY->min()));
    }
    currentStep++;
}

該函數(shù)實現(xiàn)了通過定時器觸發(fā)的動態(tài)繪制。它逐步將新點與前一個點連接，并動態(tài)調(diào)整坐標(biāo)軸的范圍以適應(yīng)新增數(shù)據(jù)。

主窗口邏輯

最后的代碼片段展示了如何使用 DynamicChart 類創(chuàng)建一個包含多個曲線的圖表，并通過按鈕控制定時器的啟動與停止：

setMinimumSize(QSize(800,500));
chartView = new DynamicChart(this);
chartView->createSeries(1, "Test Series 1");
chartView->createSeries(2, "Test Series 2");
chartView->createSeries(3, "Test Series 3");
chartView->createSeries(4, "Test Series 4");
QTimer *timer = new QTimer;
connect(timer, &QTimer::timeout, this, [=]()
{
    int m_id = QRandomGenerator::global()->bounded(1, 5);
    chartView->addPointAnimated(m_id, QPointF(m_index++, QRandomGenerator::global()->bounded(100)));
});
startButton = new QRadioButton("StartDrawing", this);
connect(startButton, &QRadioButton::clicked, [=](bool arg)
{
    if (arg)
        timer->start(100);
    else
        timer->stop();
});

通過 QRadioButton 控制定時器的啟停，點擊按鈕后，程序?qū)㈤_始在圖表上隨機添加點，并動態(tài)繪制折線或樣條曲線。

結(jié)論

此程序通過Qt的 QChartView 和定時器，實現(xiàn)了一個能夠動態(tài)繪制多條曲線的折線圖表。通過定時器控制數(shù)據(jù)點的逐步繪制，并結(jié)合坐標(biāo)軸的動態(tài)更新，使得該圖表在繪圖過程中能夠自動適應(yīng)數(shù)據(jù)的變化。這種方式適用于需要實時顯示數(shù)據(jù)變化的場景，如傳感器數(shù)據(jù)的實時監(jiān)控或動態(tài)性能分析等。

到此這篇關(guān)于使用Qt實現(xiàn)實時數(shù)據(jù)動態(tài)繪制的折線圖示例的文章就介紹到這了,更多相關(guān)Qt動態(tài)折線圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: