Qt開發技術：QCharts（三）QCharts樣條曲線圖介紹、Demo以及程式碼詳解

紅胖子(紅模仿)發表於2020-08-16
QT

若該文為原創文章，未經允許不得轉載
原博主部落格地址：https://blog.csdn.net/qq21497936
原博主部落格導航：https://blog.csdn.net/qq21497936/article/details/102478062
本文章部落格地址：https://blog.csdn.net/qq21497936/article/details/108022984
各位讀者，知識無窮而人力有窮，要麼改需求，要麼找專業人士，要麼自己研究
紅胖子(紅模仿)的博文大全：開發技術集合（包含Qt實用技術、樹莓派、三維、OpenCV、OpenGL、ffmpeg、OSG、微控制器、軟硬結合等等）持續更新中…（點選傳送門）

Qt開發專欄：開發技術（點選傳送門）

上一篇：《Qt開發技術：QCharts（二）QCharts折線圖介紹、Demo以及程式碼詳解》
下一篇： 敬請期待…

 

前言

  紅胖子，來也！
  按照順序，本章為樣條曲線圖。

 

補充

  QCharts所有的圖表都依賴《Qt開發技術：QCharts（一）QCharts基本介紹以及圖表框架詳解》中的QChart、QChartView、QLegend、QValueAxis。

 

Demo

  在這裡插入圖片描述

  在這裡插入圖片描述

Demo下載地址

  CSDN：https://download.csdn.net/download/qq21497936/12685603
  QQ群：1047134658（點選“檔案”搜尋“qChartsTools”，群內與博文同步更新）

 

樣條曲線圖

概述

  折線圖和樣條曲線圖將資料表示為一系列由直線連線的資料點。在折線圖中，資料點由直線連線，而在樣條曲線圖中，資料點由樣條曲線連線。樣條曲線是使用QPainterPath繪製的。
  樣條曲線圖是通過使用繼承QLineSeries的QSplineSeries類或繼承LineSeries的SplineSeries型別實現的。
  在這裡插入圖片描述

QSplineSeries（樣條曲線圖）

概述

  QSplineSeries類將資料顯示為樣條曲線圖。
  樣條曲線系列儲存QPainterPath繪製樣條曲線所需的資料點和段控制點。當資料發生變化時，自動計算控制點。該演算法計算點以便繪製法向樣條曲線。
  建立基本折線圖：

// 方式一：逐一新增，大批量資料較慢
QSplineSeries* pSeries = new QSplineSeries();
pSeries->append(0, 6);
pSeries->append(2, 4);
...
chart->addSeries(pSeries);

  效率更高的方式為：

// 方式二：逐一新增，大批量資料插入
_pSplineSeries = new QSplineSeries;
_pSplineSeries2 = new QSplineSeries;
_pSplineSeries3 = new QSplineSeries;
_pSplineSeries4 = new QSplineSeries;

QList<QSplineSeries *> listLine;
listLine.append(_pSplineSeries);
listLine.append(_pSplineSeries2);
listLine.append(_pSplineSeries3);
listLine.append(_pSplineSeries4);
for(int index = 1; index < 4; index++)
{
    QList<QPointF> listPointF;
    for(int index = 0; index < 11; index++)
    {
        listPointF << QPointF(index, qrand()%11);
    }
    listLine.at(index)->append(listPointF);
    listLine.at(index)->setName(QString("通道%1").arg(index+1));
    listLine.at(index)->setPen(QPen(QColor(qrand()%256, qrand()%256, qrand()%256), 2));
    // 通用：將資料插入到圖表中
    _pChart->addSeries(listLine.at(index));
}

  注意：樣條曲線圖的QLineSeries類的使用請參考QXYSeries的使用。
  QLineSeries類以折線圖的形式顯示資料。
  折線圖用於將資訊顯示為由直線連線的一系列資料點。

QXYSeries（折線圖、樣條曲線圖、散點圖的基類）

概述

  QXYSeries類是折線圖、樣條曲線圖、散點圖的基類，QSplineSeries、QLineSeries、QScatterSeries都參照該類使用。

屬性

  在這裡插入圖片描述

 

Demo核心程式碼解析

建立QChart的顯示框架

SplineChartWidget::SplineChartWidget(QWidget *parent) :
    QWidget(parent),
    _pChartView(0),
    _pChart(0),
    _pXValueAxis(0),
    _pYValueAxis(0),
    _pLegend(0),
    _pLineSeries(0),
    _pLineSeries2(0),
    _pLineSeries3(0),
    _pLineSeries4(0)
{
    _pChartView = new QChartView(this);
    _pChart = new QChart();
    initData();
}
void SplineChartWidget::resizeEvent(QResizeEvent *event)
{
    if(_pChartView)
    {
        _pChartView->setGeometry(rect());
    }
}

(本文章部落格地址：https://blog.csdn.net/qq21497936/article/details/108022984)

初始化資料

void SplineChartWidget::initData()
{
    _pSplineSeries = new QSplineSeries;
    _pSplineSeries2 = new QSplineSeries;
    _pSplineSeries3 = new QSplineSeries;
    _pSplineSeries4 = new QSplineSeries;
    // 方式一：逐一新增，大批量資料較慢
    _pSplineSeries->append(0, qrand()%11);
    _pSplineSeries->append(1, qrand()%11);
    _pSplineSeries->append(2, qrand()%11);
    _pSplineSeries->append(3, qrand()%11);
    _pSplineSeries->append(4, qrand()%11);
    _pSplineSeries->append(5, qrand()%11);
    _pSplineSeries->append(6, qrand()%11);
    _pSplineSeries->append(7, qrand()%11);
    _pSplineSeries->append(8, qrand()%11);
    _pSplineSeries->append(9, qrand()%11);
    _pSplineSeries->append(10, qrand()%11);
    _pSplineSeries->setName("通道1");
    _pSplineSeries->setPen(QPen(QColor(qrand()%256, qrand()%256, qrand()%256), 2));
    // 通用：將資料插入到圖表中
    _pChart->addSeries(_pSplineSeries);

    // 方式二：逐一新增，大批量資料較慢
    QList<QSplineSeries *> listLine;
    listLine.append(_pSplineSeries);
    listLine.append(_pSplineSeries2);
    listLine.append(_pSplineSeries3);
    listLine.append(_pSplineSeries4);
    for(int index = 1; index < 4; index++)
    {
        QList<QPointF> listPointF;
        for(int index = 0; index < 11; index++)
        {
            listPointF << QPointF(index, qrand()%11);
        }
        listLine.at(index)->append(listPointF);
        listLine.at(index)->setName(QString("通道%1").arg(index+1));
        listLine.at(index)->setPen(QPen(QColor(qrand()%256, qrand()%256, qrand()%256), 2));
        // 通用：將資料插入到圖表中
        _pChart->addSeries(listLine.at(index));
    }

    // 通用：X軸和Y軸的處理(先插入資料再處理軸,否則不會有軸)
    _pChart->createDefaultAxes();
    _pYValueAxis = dynamic_cast<QValueAxis *>(_pChart->axisY());
//    _pYValueAxis = new QValueAxis(_pChart);
    _pYValueAxis->setRange(0, 10);
    _pYValueAxis->setLinePen(QPen(Qt::black, 1));
    // tick
    _pYValueAxis->setTickCount(5);
    _pYValueAxis->setGridLinePen(QPen(Qt::gray, 1));
    _pYValueAxis->setGridLineVisible(true);
    // subTick
    _pYValueAxis->setMinorTickCount(4);
    _pYValueAxis->setMinorGridLineVisible(true);
    _pYValueAxis->setLabelFormat("%d");
//    _pChart->addAxis(_pYValueAxis, Qt::AlignLeft);

    _pXValueAxis = dynamic_cast<QValueAxis *>(_pChart->axisX());
//    _pXValueAxis = new QValueAxis(_pChart);
    _pXValueAxis->setRange(0, 10);
    _pXValueAxis->setLinePen(QPen(Qt::black, 1));
    // tick
    _pXValueAxis->setTickCount(5);
    _pXValueAxis->setGridLinePen(QPen(Qt::gray, 1));
    _pXValueAxis->setGridLineVisible(true);
    // subTick
    _pXValueAxis->setMinorTickCount(4); // 相反
    _pXValueAxis->setMinorGridLineVisible(true);
    _pXValueAxis->setLabelFormat("%d s");
//    _pChart->addAxis(_pXValueAxis, Qt::AlignBottom);

    // 通用：檢視顯示設定為圖表
    _pChartView->setRubberBand(QChartView::NoRubberBand);   // 不縮放
    _pChartView->setDragMode(QChartView::NoDrag);   // 拽拖：需要自己重寫QCharView
    _pChartView->setChart(_pChart);


    // 標識
    _pLegend = _pChart->legend();
    _pLegend->setAlignment(Qt::AlignRight);

    // 平滑
    _pChartView->setRenderHint(QPainter::Antialiasing, true);
    // 陰影
    _pChart->setDropShadowEnabled(true);

}

設定資料線是否顯示（標籤顯示會同步）

void SplineChartWidget::setDataVisible(int index, bool visible)
{
    if(index < 0 || index > 3)
    {
        return;
    }
    QList<QSplineSeries *> listLine;
    listLine.append(_pSplineSeries);
    listLine.append(_pSplineSeries2);
    listLine.append(_pSplineSeries3);
    listLine.append(_pSplineSeries4);
    listLine.at(index)->setVisible(visible);
}

設定主題樣式

void SplineChartWidget::setTheme(QChart::ChartTheme theme)
{
    _pChart->setTheme(theme);
}

設定動畫模式

void SplineChartWidget::setAnimationOptions(QChart::AnimationOption option)
{
    _pChart->setAnimationOptions(option);
}

設定標籤顯示位置

void SplineChartWidget::setAlignment(Qt::Alignment align)
{
    _pLegend->setAlignment(align);
}

設定標籤是否可見

void SplineChartWidget::setLegendVisible(bool visible)
{
    _pLegend->setVisible(visible);
    _pChartView->setRenderHint(QPainter::Antialiasing);
}

設定是否繪製平滑

void SplineChartWidget::setAntialiasing(bool antialiasing)
{
    _pChartView->setRenderHint(QPainter::Antialiasing, antialiasing);
}

設定是否有陰影

void SplineChartWidget::setShadow(bool shadow)
{
    _pChart->setDropShadowEnabled(shadow);
}

重置隨機資料

void SplineChartWidget::resetData()
{
    _pChart->removeAllSeries();
    _pSplineSeries = new QSplineSeries;
    _pSplineSeries2 = new QSplineSeries;
    _pSplineSeries3 = new QSplineSeries;
    _pSplineSeries4 = new QSplineSeries;
    QList<QSplineSeries *> listLine;
    listLine.append(_pSplineSeries);
    listLine.append(_pSplineSeries2);
    listLine.append(_pSplineSeries3);
    listLine.append(_pSplineSeries4);
    for(int index = 0; index < 4; index++)
    {
        QList<QPointF> listPointF;
        for(int index = 0; index < 11; index++)
        {
            listPointF << QPointF(index, qrand()%11);
        }
        listLine.at(index)->append(listPointF);
        listLine.at(index)->setName(QString("通道%1").arg(index+1));
        listLine.at(index)->setPen(QPen(QColor(qrand()%256, qrand()%256, qrand()%256), 2));
        _pChart->addSeries(listLine.at(index));
    }
    resetColor();
}

重置隨機顏色

void SplineChartWidget::resetColor()
{
    QList<QLineSeries *> listLine;
    listLine.append(_pSplineSeries);
    listLine.append(_pSplineSeries2);
    listLine.append(_pSplineSeries3);
    listLine.append(_pSplineSeries4);
    for(int index = 0; index < listLine.size(); index++)
    {
        listLine.at(index)->setColor(QColor(qrand()%256, qrand()%256, qrand()%256));
    }
}
 

工程模板：對應版本號v1.0.0

  對應版本號v1.0.0

 

上一篇：《Qt開發技術：QCharts（二）QCharts折線圖介紹、Demo以及程式碼詳解》
下一篇： 敬請期待…

 

原博主部落格地址：https://blog.csdn.net/qq21497936
原博主部落格導航：https://blog.csdn.net/qq21497936/article/details/102478062
本文章部落格地址：https://blog.csdn.net/qq21497936/article/details/108022984

相關文章