碼上快樂

相關內容    簡體    繁體

Qt開發技術：QCharts（四）QChart面積圖介紹、Demo以及代碼詳解

本文轉載自   查看原文   2020-08-26 21:09   793 

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

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

上一篇：《Qt開發技術：QCharts（三）QCharts樣條曲線圖介紹、Demo以及代碼詳解》
下一篇： 敬請期待…

 

前言

  紅胖子，來也！
  按照順序，本章為面積圖。

 

補充

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

 

Demo

  在這里插入圖片描述
  在這里插入圖片描述

 

Demo下載地址

  當前為v1.1.0版本
  CSDN：https://download.csdn.net/download/qq21497936/12753524
  QQ群：1047134658（點擊“文件”搜索“qChartsTools”，群內與博文同步更新）

 

面積圖

概述

  面積圖是使用QAreaSeries類或AreaSeries QML類型實現的。默認情況下，X軸被用作一個邊界和QLineSeries或線列作為另一個。但是，可以使用QLineSeries或LineSeries作為兩個邊界。
  在這里插入圖片描述

 

QAreaSeries（面積圖類）

概述

  QAreaSeries類在面積圖中顯示數據。
  面積序列用於顯示定量數據。它是基於一系列線，用顏色強調邊界線之間的區域。由於區域序列基於行序列，QAreaSeries構造函數需要一個QLineSeries實例，該實例定義區域的上邊界。默認情況下，使用繪圖區域底部作為下邊界繪制面積圖。下邊界可以由另一條線指定，而不是繪圖區域的底部。在這種情況下，QAReaSeries應該用兩個QLineSeries實例初始化。
  注意：當下邊界值大於上邊界值時，術語上下邊界可能會產生誤導。重點是這兩條邊界線之間的區域將被填充。
  在這里插入圖片描述
  下面的代碼片段說明了如何創建基本面積圖：

_pLineSeries = new QLineSeries;
_pLineSeries2 = new QLineSeries;
_pLineSeries3 = new QLineSeries;
_pLineSeries4 = new QLineSeries;
// 方式一：逐一添加，大批量數據較慢
_pLineSeries->append(0, qrand()%11);
_pLineSeries->append(1, qrand()%11);
_pLineSeries->append(2, qrand()%11);
_pLineSeries->append(3, qrand()%11);
_pLineSeries->append(4, qrand()%11);
_pLineSeries->append(5, qrand()%11);
_pLineSeries->append(6, qrand()%11);
_pLineSeries->append(7, qrand()%11);
_pLineSeries->append(8, qrand()%11);
_pLineSeries->append(9, qrand()%11);
_pLineSeries->append(10, qrand()%11);
_pLineSeries->setName("通道1");
_pLineSeries->setPen(QPen(QColor(qrand()%256, qrand()%256, qrand()%256), 2));
// 通用：將數據插入到圖表中
_pAreaSeries = new QAreaSeries();
_pAreaSeries->setName("面積1");
_pLineSeries->setPointsVisible(true);
_pLineSeries->setPointLabelsFormat("(@xPoint,@yPoint)");
_pAreaSeries->setUpperSeries(_pLineSeries);
_pChart->addSeries(_pAreaSeries);

  效率更高的方式為：

// 方式二：逐一添加，大批量數據插入
QList<QLineSeries *> list;
list.append(_pLineSeries);
list.append(_pLineSeries2);
list.append(_pLineSeries3);
list.append(_pLineSeries4);
for(int index = 0; index < 4; index++)
{
    QList<QPointF> listPointF;
    for(int index = 0; index < 11; index++)
    {
        listPointF << QPointF(index, qrand()%11);
    }
    list.at(index)->append(listPointF);
    list.at(index)->setName(QString("通道%1").arg(index+1));
    list.at(index)->setPen(QPen(QColor(qrand()%256, qrand()%256, qrand()%256), 2));
}
// 通用：將數據插入到圖表中
_pAreaSeries = new QAreaSeries();
_pAreaSeries->setName("面積1");
_pLineSeries->setPointsVisible(true);
_pLineSeries->setPointLabelsFormat("(@xPoint,@yPoint)");
_pAreaSeries->setUpperSeries(_pLineSeries);
_pChart->addSeries(_pAreaSeries);

_pAreaSeries2 = new QAreaSeries();
_pAreaSeries2->setName("面積2");
_pAreaSeries2->setUpperSeries(_pLineSeries2);
_pChart->addSeries(_pAreaSeries2);

_pAreaSeries3 = new QAreaSeries();
_pAreaSeries3->setName("面積3");
_pAreaSeries3->setUpperSeries(_pLineSeries3);
_pAreaSeries3->setLowerSeries(_pLineSeries2);
_pChart->addSeries(_pAreaSeries3);
_pAreaSeries4 = new QAreaSeries();
_pAreaSeries4->setName("面積4");
_pAreaSeries4->setUpperSeries(_pLineSeries4);
_pAreaSeries4->setLowerSeries(_pLineSeries3);
_pChart->addSeries(_pAreaSeries4);
 

本文章博客地址：https://blog.csdn.net/qq21497936/article/details/108240696

Demo核心代碼解析

建立QChart顯示框架

AreaChartWidget::AreaChartWidget(QWidget *parent) :
    QWidget(parent),
    _pChartView(0),
    _pChart(0),
    _pXValueAxis(0),
    _pYValueAxis(0),
    _pLegend(0),
    _pLineSeries(0),
    _pLineSeries2(0),
    _pLineSeries3(0),
    _pLineSeries4(0),
    _pAreaSeries(0),
    _pAreaSeries2(0),
    _pAreaSeries3(0),
    _pAreaSeries4(0)
{
    _pChartView = new QChartView(this);
    _pChart = new QChart();
    initData();
}

初始化數據

void AreaChartWidget::initData()
{
    _pLineSeries = new QLineSeries;
    _pLineSeries2 = new QLineSeries;
    _pLineSeries3 = new QLineSeries;
    _pLineSeries4 = new QLineSeries;
    // 方式一：逐一添加，大批量數據較慢
    _pLineSeries->append(0, qrand()%11);
    _pLineSeries->append(1, qrand()%11);
    _pLineSeries->append(2, qrand()%11);
    _pLineSeries->append(3, qrand()%11);
    _pLineSeries->append(4, qrand()%11);
    _pLineSeries->append(5, qrand()%11);
    _pLineSeries->append(6, qrand()%11);
    _pLineSeries->append(7, qrand()%11);
    _pLineSeries->append(8, qrand()%11);
    _pLineSeries->append(9, qrand()%11);
    _pLineSeries->append(10, qrand()%11);
    _pLineSeries->setName("通道1");
    _pLineSeries->setPen(QPen(QColor(qrand()%256, qrand()%256, qrand()%256), 2));
    // 通用：將數據插入到圖表中
    _pAreaSeries = new QAreaSeries();
    _pAreaSeries->setName("面積1");
    _pLineSeries->setPointsVisible(true);
    _pLineSeries->setPointLabelsFormat("(@xPoint,@yPoint)");
    _pAreaSeries->setUpperSeries(_pLineSeries);
    _pChart->addSeries(_pAreaSeries);

    // 方式二：逐一添加，大批量數據插入
    QList<QLineSeries *> list;
    list.append(_pLineSeries);
    list.append(_pLineSeries2);
    list.append(_pLineSeries3);
    list.append(_pLineSeries4);
    for(int index = 1; index < 4; index++)
    {
        QList<QPointF> listPointF;
        for(int index = 0; index < 11; index++)
        {
            listPointF << QPointF(index, qrand()%11);
        }
        list.at(index)->append(listPointF);
        list.at(index)->setName(QString("通道%1").arg(index+1));
        list.at(index)->setPen(QPen(QColor(qrand()%256, qrand()%256, qrand()%256), 2));
    }
    // 通用：將數據插入到圖表中
    _pAreaSeries2 = new QAreaSeries();
    _pAreaSeries2->setName("面積2");
    _pAreaSeries2->setUpperSeries(_pLineSeries2);
    _pChart->addSeries(_pAreaSeries2);

    _pAreaSeries3 = new QAreaSeries();
    _pAreaSeries3->setName("面積3");
    _pAreaSeries3->setUpperSeries(_pLineSeries3);
    _pAreaSeries3->setLowerSeries(_pLineSeries2);
    _pChart->addSeries(_pAreaSeries3);

    _pAreaSeries4 = new QAreaSeries();
    _pAreaSeries4->setName("面積4");
    _pAreaSeries4->setUpperSeries(_pLineSeries4);
    _pAreaSeries4->setLowerSeries(_pLineSeries3);
    _pChart->addSeries(_pAreaSeries4);


    // 通用：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 AreaChartWidget::setDataVisible(int index, bool visible)
{
    if(index < 0 || index > 3)
    {
        return;
    }
    QList<QAreaSeries *> list;
    list.append(_pAreaSeries);
    list.append(_pAreaSeries2);
    list.append(_pAreaSeries3);
    list.append(_pAreaSeries4);
    list.at(index)->setVisible(visible);
}

設置主題樣式

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

設置動畫模式

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

設置標簽顯示位置

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

設置標簽是否可見

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

設置是否繪制平滑

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

設置是否有陰影

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

是否顯示數據點（新增）

void AreaChartWidget::setPointVisible(bool visible)
{
    _pAreaSeries->setPointsVisible(visible);
    _pAreaSeries2->setPointsVisible(visible);
    _pAreaSeries3->setPointsVisible(visible);
    _pAreaSeries4->setPointsVisible(visible);
}

是否顯示數據點坐標（新增）

void AreaChartWidget::setPointLabelVisible(bool visible)
{
    _pAreaSeries->setPointLabelsFormat("(@xPoint,@yPoint)");
    _pAreaSeries->setPointLabelsVisible(visible);
    _pAreaSeries2->setPointLabelsFormat("(@xPoint,@yPoint)");
    _pAreaSeries2->setPointLabelsVisible(visible);
    _pAreaSeries3->setPointLabelsFormat("(@xPoint,@yPoint)");
    _pAreaSeries3->setPointLabelsVisible(visible);
    _pAreaSeries4->setPointLabelsFormat("(@xPoint,@yPoint)");
    _pAreaSeries4->setPointLabelsVisible(visible);
}

重置隨機數據

void AreaChartWidget::resetData()
{
    _pChart->removeAllSeries();
    _pLineSeries = new QLineSeries;
    _pLineSeries2 = new QLineSeries;
    _pLineSeries3 = new QLineSeries;
    _pLineSeries4 = new QLineSeries;

    QList<QLineSeries *> list;
    list.append(_pLineSeries);
    list.append(_pLineSeries2);
    list.append(_pLineSeries3);
    list.append(_pLineSeries4);
    for(int index = 0; index < 4; index++)
    {
        QList<QPointF> listPointF;
        for(int index = 0; index < 11; index++)
        {
            listPointF << QPointF(index, qrand()%11);
        }
        list.at(index)->append(listPointF);
        list.at(index)->setName(QString("通道%1").arg(index+1));
        list.at(index)->setPen(QPen(QColor(qrand()%256, qrand()%256, qrand()%256), 2));
    }

    _pAreaSeries = new QAreaSeries();
    _pAreaSeries->setName("面積1");
    _pAreaSeries->setUpperSeries(_pLineSeries);

    _pAreaSeries2 = new QAreaSeries();
    _pAreaSeries->setName("面積2");
    _pAreaSeries2->setUpperSeries(_pLineSeries2);
    _pChart->addSeries(_pAreaSeries2);

    _pAreaSeries3 = new QAreaSeries();
    _pAreaSeries3->setName("面積3");
    _pAreaSeries3->setUpperSeries(_pLineSeries3);
    _pAreaSeries3->setLowerSeries(_pLineSeries2);
    _pChart->addSeries(_pAreaSeries3);

    _pAreaSeries4 = new QAreaSeries();
    _pAreaSeries4->setName("面積4");
    _pAreaSeries4->setUpperSeries(_pLineSeries3);
    _pAreaSeries4->setLowerSeries(_pLineSeries4);
    _pChart->addSeries(_pAreaSeries4);

    _pChart->addSeries(_pAreaSeries);
    resetColor();
}

初始化顏色

void AreaChartWidget::resetColor()
{
    QList<QLineSeries *> list;
    list.append(_pLineSeries);
    list.append(_pLineSeries2);
    list.append(_pLineSeries3);
    list.append(_pLineSeries4);
    for(int index = 0; index < list.size(); index++)
    {
        list.at(index)->setColor(QColor(qrand()%256, qrand()%256, qrand()%256));
    }
}
 

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

  對應版本號v1.1.0
  增加面積圖
  對折線圖、曲線圖和面積圖增加數據點顯示、數據點標簽顯示

 

上一篇：《Qt開發技術：QCharts（三）QCharts樣條曲線圖介紹、Demo以及代碼詳解》
下一篇： 敬請期待…


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 QT -- QChart畫柱狀圖 QT -- QChart的顯示 47.QT-QChart之曲線圖,餅狀圖,條形圖使用 Qt三方庫開發技術（一）：QuaZIP介紹、編譯和使用 10大高性能開發核心技術，多圖詳解！ qt qml qchart 圖表組件 地圖開發筆記（一）：百度地圖介紹、使用和Qt內嵌地圖Demo Qt+騰訊IM開發筆記（一）：騰訊IM介紹、使用和Qt集成騰訊IM-SDK的工程模板Demo 【Echarts】詳解 折線圖/面積圖！！！快來看看吧！！ Qt QChart 設置部分圖例隱藏
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM