若该文为原创文章，未经允许不得转载 原博主博客地址：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以及代码详解》 下一篇： 敬请期待...
<br>前言
红胖子，来也！ 按照顺序，本章为面积图。
<br>补充
QCharts所有的图表都依赖《Qt开发技术：QCharts（一）QCharts基本介绍以及图表框架详解》中的QChart、QChartView、QLegend、QValueAxis。
<br>Demo
Demo下载地址
当前为v1.1.0版本 CSDN：https://download.csdn.net/download/qq21497936/12753524 QQ群：1047134658（点击“文件”搜索“qChartsTools”，群内与博文同步更新）
<br>面积图
概述
面积图是使用QAreaSeries类或AreaSeries QML类型实现的。默认情况下，X轴被用作一个边界和QLineSeries或线列作为另一个。但是，可以使用QLineSeries或LineSeries作为两个边界。 
QAreaSeries（面积图类）
概述
QAreaSeries类在面积图中显示数据。 面积序列用于显示定量数据。它是基于一系列线，用颜色强调边界线之间的区域。由于区域序列基于行序列，QAreaSeries构造函数需要一个QLineSeries实例，该实例定义区域的上边界。默认情况下，使用绘图区域底部作为下边界绘制面积图。下边界可以由另一条线指定，而不是绘图区域的底部。在这种情况下，QAReaSeries应该用两个QLineSeries实例初始化。 注意：当下边界值大于上边界值时，术语上下边界可能会产生误导。重点是这两条边界线之间的区域将被填充。 
下面的代码片段说明了如何创建基本面积图：
1_pLineSeries = new QLineSeries; 2_pLineSeries2 = new QLineSeries; 3_pLineSeries3 = new QLineSeries; 4_pLineSeries4 = new QLineSeries; 5// 方式一：逐一添加，大批量数据较慢 6_pLineSeries->append(0, qrand()%11); 7_pLineSeries->append(1, qrand()%11); 8_pLineSeries->append(2, qrand()%11); 9_pLineSeries->append(3, qrand()%11); 10_pLineSeries->append(4, qrand()%11); 11_pLineSeries->append(5, qrand()%11); 12_pLineSeries->append(6, qrand()%11); 13_pLineSeries->append(7, qrand()%11); 14_pLineSeries->append(8, qrand()%11); 15_pLineSeries->append(9, qrand()%11); 16_pLineSeries->append(10, qrand()%11); 17_pLineSeries->setName("通道1"); 18_pLineSeries->setPen(QPen(QColor(qrand()%256, qrand()%256, qrand()%256), 2)); 19// 通用：将数据插入到图表中 20_pAreaSeries = new QAreaSeries(); 21_pAreaSeries->setName("面积1"); 22_pLineSeries->setPointsVisible(true); 23_pLineSeries->setPointLabelsFormat("(@xPoint,@yPoint)"); 24_pAreaSeries->setUpperSeries(_pLineSeries); 25_pChart->addSeries(_pAreaSeries);
效率更高的方式为：
<br>1// 方式二：逐一添加，大批量数据插入 2QList<QLineSeries *> list; 3list.append(_pLineSeries); 4list.append(_pLineSeries2); 5list.append(_pLineSeries3); 6list.append(_pLineSeries4); 7for(int index = 0; index < 4; index++) 8{ 9 QList<QPointF> listPointF; 10 for(int index = 0; index < 11; index++) 11 { 12 listPointF << QPointF(index, qrand()%11); 13 } 14 list.at(index)->append(listPointF); 15 list.at(index)->setName(QString("通道%1").arg(index+1)); 16 list.at(index)->setPen(QPen(QColor(qrand()%256, qrand()%256, qrand()%256), 2)); 17} 18// 通用：将数据插入到图表中 19_pAreaSeries = new QAreaSeries(); 20_pAreaSeries->setName("面积1"); 21_pLineSeries->setPointsVisible(true); 22_pLineSeries->setPointLabelsFormat("(@xPoint,@yPoint)"); 23_pAreaSeries->setUpperSeries(_pLineSeries); 24_pChart->addSeries(_pAreaSeries); 25 26_pAreaSeries2 = new QAreaSeries(); 27_pAreaSeries2->setName("面积2"); 28_pAreaSeries2->setUpperSeries(_pLineSeries2); 29_pChart->addSeries(_pAreaSeries2); 30 31_pAreaSeries3 = new QAreaSeries(); 32_pAreaSeries3->setName("面积3"); 33_pAreaSeries3->setUpperSeries(_pLineSeries3); 34_pAreaSeries3->setLowerSeries(_pLineSeries2); 35_pChart->addSeries(_pAreaSeries3); 36_pAreaSeries4 = new QAreaSeries(); 37_pAreaSeries4->setName("面积4"); 38_pAreaSeries4->setUpperSeries(_pLineSeries4); 39_pAreaSeries4->setLowerSeries(_pLineSeries3); 40_pChart->addSeries(_pAreaSeries4);
本文章博客地址：https://blog.csdn.net/qq21497936/article/details/108240696
Demo核心代码解析
建立QChart显示框架
1AreaChartWidget::AreaChartWidget(QWidget *parent) : 2 QWidget(parent), 3 _pChartView(0), 4 _pChart(0), 5 _pXValueAxis(0), 6 _pYValueAxis(0), 7 _pLegend(0), 8 _pLineSeries(0), 9 _pLineSeries2(0), 10 _pLineSeries3(0), 11 _pLineSeries4(0), 12 _pAreaSeries(0), 13 _pAreaSeries2(0), 14 _pAreaSeries3(0), 15 _pAreaSeries4(0) 16{ 17 _pChartView = new QChartView(this); 18 _pChart = new QChart(); 19 initData(); 20}
初始化数据
1void AreaChartWidget::initData() 2{ 3 _pLineSeries = new QLineSeries; 4 _pLineSeries2 = new QLineSeries; 5 _pLineSeries3 = new QLineSeries; 6 _pLineSeries4 = new QLineSeries; 7 // 方式一：逐一添加，大批量数据较慢 8 _pLineSeries->append(0, qrand()%11); 9 _pLineSeries->append(1, qrand()%11); 10 _pLineSeries->append(2, qrand()%11); 11 _pLineSeries->append(3, qrand()%11); 12 _pLineSeries->append(4, qrand()%11); 13 _pLineSeries->append(5, qrand()%11); 14 _pLineSeries->append(6, qrand()%11); 15 _pLineSeries->append(7, qrand()%11); 16 _pLineSeries->append(8, qrand()%11); 17 _pLineSeries->append(9, qrand()%11); 18 _pLineSeries->append(10, qrand()%11); 19 _pLineSeries->setName("通道1"); 20 _pLineSeries->setPen(QPen(QColor(qrand()%256, qrand()%256, qrand()%256), 2)); 21 // 通用：将数据插入到图表中 22 _pAreaSeries = new QAreaSeries(); 23 _pAreaSeries->setName("面积1"); 24 _pLineSeries->setPointsVisible(true); 25 _pLineSeries->setPointLabelsFormat("(@xPoint,@yPoint)"); 26 _pAreaSeries->setUpperSeries(_pLineSeries); 27 _pChart->addSeries(_pAreaSeries); 28 29 // 方式二：逐一添加，大批量数据插入 30 QList<QLineSeries *> list; 31 list.append(_pLineSeries); 32 list.append(_pLineSeries2); 33 list.append(_pLineSeries3); 34 list.append(_pLineSeries4); 35 for(int index = 1; index < 4; index++) 36 { 37 QList<QPointF> listPointF; 38 for(int index = 0; index < 11; index++) 39 { 40 listPointF << QPointF(index, qrand()%11); 41 } 42 list.at(index)->append(listPointF); 43 list.at(index)->setName(QString("通道%1").arg(index+1)); 44 list.at(index)->setPen(QPen(QColor(qrand()%256, qrand()%256, qrand()%256), 2)); 45 } 46 // 通用：将数据插入到图表中 47 _pAreaSeries2 = new QAreaSeries(); 48 _pAreaSeries2->setName("面积2"); 49 _pAreaSeries2->setUpperSeries(_pLineSeries2); 50 _pChart->addSeries(_pAreaSeries2); 51 52 _pAreaSeries3 = new QAreaSeries(); 53 _pAreaSeries3->setName("面积3"); 54 _pAreaSeries3->setUpperSeries(_pLineSeries3); 55 _pAreaSeries3->setLowerSeries(_pLineSeries2); 56 _pChart->addSeries(_pAreaSeries3); 57 58 _pAreaSeries4 = new QAreaSeries(); 59 _pAreaSeries4->setName("面积4"); 60 _pAreaSeries4->setUpperSeries(_pLineSeries4); 61 _pAreaSeries4->setLowerSeries(_pLineSeries3); 62 _pChart->addSeries(_pAreaSeries4); 63 64 65 // 通用：X轴和Y轴的处理(先插入数据再处理轴,否则不会有轴) 66 _pChart->createDefaultAxes(); 67 _pYValueAxis = dynamic_cast<QValueAxis *>(_pChart->axisY()); 68// _pYValueAxis = new QValueAxis(_pChart); 69 _pYValueAxis->setRange(0, 10); 70 _pYValueAxis->setLinePen(QPen(Qt::black, 1)); 71 // tick 72 _pYValueAxis->setTickCount(5); 73 _pYValueAxis->setGridLinePen(QPen(Qt::gray, 1)); 74 _pYValueAxis->setGridLineVisible(true); 75 // subTick 76 _pYValueAxis->setMinorTickCount(4); 77 _pYValueAxis->setMinorGridLineVisible(true); 78 _pYValueAxis->setLabelFormat("%d"); 79// _pChart->addAxis(_pYValueAxis, Qt::AlignLeft); 80 81 _pXValueAxis = dynamic_cast<QValueAxis *>(_pChart->axisX()); 82// _pXValueAxis = new QValueAxis(_pChart); 83 _pXValueAxis->setRange(0, 10); 84 _pXValueAxis->setLinePen(QPen(Qt::black, 1)); 85 // tick 86 _pXValueAxis->setTickCount(5); 87 _pXValueAxis->setGridLinePen(QPen(Qt::gray, 1)); 88 _pXValueAxis->setGridLineVisible(true); 89 // subTick 90 _pXValueAxis->setMinorTickCount(4); // 相反 91 _pXValueAxis->setMinorGridLineVisible(true); 92 _pXValueAxis->setLabelFormat("%d s"); 93// _pChart->addAxis(_pXValueAxis, Qt::AlignBottom); 94 95 // 通用：视图显示设置为图表 96 _pChartView->setRubberBand(QChartView::NoRubberBand); // 不缩放 97 _pChartView->setDragMode(QChartView::NoDrag); // 拽拖：需要自己重写QCharView 98 _pChartView->setChart(_pChart); 99 100 101 // 标识 102 _pLegend = _pChart->legend(); 103 _pLegend->setAlignment(Qt::AlignRight); 104 105 // 平滑 106 _pChartView->setRenderHint(QPainter::Antialiasing, true); 107 // 阴影 108 _pChart->setDropShadowEnabled(true); 109}
设置数据线是否显示（标签显示会同步）
1void AreaChartWidget::setDataVisible(int index, bool visible) 2{ 3 if(index < 0 || index > 3) 4 { 5 return; 6 } 7 QList<QAreaSeries *> list; 8 list.append(_pAreaSeries); 9 list.append(_pAreaSeries2); 10 list.append(_pAreaSeries3); 11 list.append(_pAreaSeries4); 12 list.at(index)->setVisible(visible); 13}
设置主题样式
1void AreaChartWidget::setTheme(QChart::ChartTheme theme) 2{ 3 _pChart->setTheme(theme); 4}
设置动画模式
1void AreaChartWidget::setAnimationOptions(QChart::AnimationOption option) 2{ 3 _pChart->setAnimationOptions(option); 4}
设置标签显示位置
1void AreaChartWidget::setAlignment(Qt::Alignment align) 2{ 3 _pLegend->setAlignment(align); 4}
设置标签是否可见
1void AreaChartWidget::setLegendVisible(bool visible) 2{ 3 _pLegend->setVisible(visible); 4 _pChartView->setRenderHint(QPainter::Antialiasing); 5}
设置是否绘制平滑
1void AreaChartWidget::setAntialiasing(bool antialiasing) 2{ 3 _pChartView->setRenderHint(QPainter::Antialiasing, antialiasing); 4}
设置是否有阴影
1void AreaChartWidget::setShadow(bool shadow) 2{ 3 _pChart->setDropShadowEnabled(shadow); 4}
是否显示数据点（新增）
1void AreaChartWidget::setPointVisible(bool visible) 2{ 3 _pAreaSeries->setPointsVisible(visible); 4 _pAreaSeries2->setPointsVisible(visible); 5 _pAreaSeries3->setPointsVisible(visible); 6 _pAreaSeries4->setPointsVisible(visible); 7}
是否显示数据点坐标（新增）
1void AreaChartWidget::setPointLabelVisible(bool visible) 2{ 3 _pAreaSeries->setPointLabelsFormat("(@xPoint,@yPoint)"); 4 _pAreaSeries->setPointLabelsVisible(visible); 5 _pAreaSeries2->setPointLabelsFormat("(@xPoint,@yPoint)"); 6 _pAreaSeries2->setPointLabelsVisible(visible); 7 _pAreaSeries3->setPointLabelsFormat("(@xPoint,@yPoint)"); 8 _pAreaSeries3->setPointLabelsVisible(visible); 9 _pAreaSeries4->setPointLabelsFormat("(@xPoint,@yPoint)"); 10 _pAreaSeries4->setPointLabelsVisible(visible); 11}
重置随机数据
1void AreaChartWidget::resetData() 2{ 3 _pChart->removeAllSeries(); 4 _pLineSeries = new QLineSeries; 5 _pLineSeries2 = new QLineSeries; 6 _pLineSeries3 = new QLineSeries; 7 _pLineSeries4 = new QLineSeries; 8 9 QList<QLineSeries *> list; 10 list.append(_pLineSeries); 11 list.append(_pLineSeries2); 12 list.append(_pLineSeries3); 13 list.append(_pLineSeries4); 14 for(int index = 0; index < 4; index++) 15 { 16 QList<QPointF> listPointF; 17 for(int index = 0; index < 11; index++) 18 { 19 listPointF << QPointF(index, qrand()%11); 20 } 21 list.at(index)->append(listPointF); 22 list.at(index)->setName(QString("通道%1").arg(index+1)); 23 list.at(index)->setPen(QPen(QColor(qrand()%256, qrand()%256, qrand()%256), 2)); 24 } 25 26 _pAreaSeries = new QAreaSeries(); 27 _pAreaSeries->setName("面积1"); 28 _pAreaSeries->setUpperSeries(_pLineSeries); 29 30 _pAreaSeries2 = new QAreaSeries(); 31 _pAreaSeries->setName("面积2"); 32 _pAreaSeries2->setUpperSeries(_pLineSeries2); 33 _pChart->addSeries(_pAreaSeries2); 34 35 _pAreaSeries3 = new QAreaSeries(); 36 _pAreaSeries3->setName("面积3"); 37 _pAreaSeries3->setUpperSeries(_pLineSeries3); 38 _pAreaSeries3->setLowerSeries(_pLineSeries2); 39 _pChart->addSeries(_pAreaSeries3); 40 41 _pAreaSeries4 = new QAreaSeries(); 42 _pAreaSeries4->setName("面积4"); 43 _pAreaSeries4->setUpperSeries(_pLineSeries3); 44 _pAreaSeries4->setLowerSeries(_pLineSeries4); 45 _pChart->addSeries(_pAreaSeries4); 46 47 _pChart->addSeries(_pAreaSeries); 48 resetColor(); 49}
初始化颜色
<br>1void AreaChartWidget::resetColor() 2{ 3 QList<QLineSeries *> list; 4 list.append(_pLineSeries); 5 list.append(_pLineSeries2); 6 list.append(_pLineSeries3); 7 list.append(_pLineSeries4); 8 for(int index = 0; index < list.size(); index++) 9 { 10 list.at(index)->setColor(QColor(qrand()%256, qrand()%256, qrand()%256)); 11 } 12}
工程模板：对应版本号v1.1.0
对应版本号v1.1.0 增加面积图 对折线图、曲线图和面积图增加数据点显示、数据点标签显示
<br>上一篇：《Qt开发技术：QCharts（三）QCharts样条曲线图介绍、Demo以及代码详解》 下一篇： 敬请期待...