AI 助理
备案控制台
开发者社区 云计算 文章 正文

Qt开发技术：QCharts（四）QCharts面积图介绍、Demo以及代码详解

2022-06-08 558
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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开发
Qt demo
Qt代码
Qt技术
Qt开发demo
长沙红胖子Qt
目录
相关文章
yantuguiguziPGJ
|
2月前
|
开发工具 C++
qt开发技巧与三个问题点
本文介绍了三个Qt开发中的常见问题及其解决方法，并提供了一些实用的开发技巧。
yantuguiguziPGJ
80 0
yantuguiguziPGJ
|
2月前
自己动手写QT多线程demo
本文是作者关于如何编写Qt多线程demo的教程，介绍了如何实现多线程功能，包括可暂停和继续的功能。文章提供了部分示例代码，展示了如何创建线程类、启动和管理线程，以及线程间的通信。同时，还提供了相关参考资料和免费下载链接。
yantuguiguziPGJ
62 0
1387503158665997
|
2月前
Qt开发
Qt开发
1387503158665997
84 1
蓝易云
|
3月前
|
C++
C++ Qt开发：QUdpSocket网络通信组件
QUdpSocket是Qt网络编程中一个非常有用的组件，它提供了在UDP协议下进行数据发送和接收的能力。通过简单的方法和信号，可以轻松实现基于UDP的网络通信。不过，需要注意的是，UDP协议本身不保证数据的可靠传输，因此在使用QUdpSocket时，可能需要在应用层实现一些机制来保证数据的完整性和顺序，或者选择在适用的场景下使用UDP协议。
蓝易云
151 2
小狮子安度因1
|
3月前
|
网络协议 容器
Qt开发网络嗅探器03
Qt开发网络嗅探器03
小狮子安度因1
47 1
DS小龙哥
|
4月前
|
数据安全/隐私保护 C++ 计算机视觉
Qt(C++)开发一款图片防盗用水印制作小工具
文本水印是一种常用的防盗用手段，可以将文本信息嵌入到图片、视频等文件中，用于识别和证明文件的版权归属。在数字化和网络化的时代，大量的原创作品容易被不法分子盗用或侵犯版权，因此加入文本水印成为了保护原创作品和维护知识产权的必要手段。 通常情况下，文本水印可以包含版权声明、制作者姓名、日期、网址等信息，以帮助识别文件的来源和版权归属。同时，为了增强防盗用效果，文本水印通常会采用字体、颜色、角度等多种组合方式，使得水印难以被删除或篡改，有效地降低了盗用意愿和风险。 开发人员可以使用图像处理技术和编程语言实现文本水印的功能，例如使用Qt的QPainter类进行文本绘制操作，将文本信息嵌入到图片中，
DS小龙哥
181 1
Qt(C++)开发一款图片防盗用水印制作小工具
国中之林
|
3月前
|
监控 C++ 容器
【qt】MDI多文档界面开发
【qt】MDI多文档界面开发
国中之林
88 0
小狮子安度因1
|
3月前
Qt开发网络嗅探器02
Qt开发网络嗅探器02
小狮子安度因1
37 3
小狮子安度因1
|
3月前
|
存储 运维 监控
Qt开发网络嗅探器01
Qt开发网络嗅探器01
小狮子安度因1
71 2
国中之林
|
3月前
【qt】多窗口开发
【qt】多窗口开发
国中之林
58 0

热门文章

最新文章

  • 1
    Qt Creator编译项目，报错，error: LNK1158: 无法运行“rc.exe”
  • 2
    Qt核心剖析：信息隐藏(2)
  • 3
    Qt Creator指定临时文件生成目录(MOC_DIR/RCC_DIR等)和PWD/OUT_PWD/.pro官方文档
  • 4
    QT刷屏函数
  • 5
    Visual Studio下程序开发: 编译QT程序Debug正常,Release出错
  • 6
    Qt开源作品1-视频流播放ffmpeg内核
  • 7
    使用qt实现简易示波器功能
  • 8
    Qt编写的项目作品25-硬件综合应用(热敏打印+身份证+短信猫)
  • 9
    Qt实用技巧：自定义窗口标题栏
  • 10
    基于C++(QT框架)设计的网络摄像头项目(支持跨平台运行)
  • 1
    Qt TCP网络上位机的设计（通过网络编程与下位机结合）
    322
  • 2
    Qt 目录操作(QDir 类)及展示系统文件实战 & QFilelnfo 类介绍和获取文件属性项目实战
    422
  • 3
    Qt 读写文件（QFile&QTextStream&QDataStream) 详解
    864
  • 4
    Qt Model&View&Delegate(模型-视图-代理) 介绍和使用
    312
  • 5
    Qt 窗口常用位置API函数 & 绘图原理 & 双缓冲机制 总结
    165
  • 6
    Qt （QInputDialog 、QMessageBox、QMessageBox）对话框实战
    823
  • 7
    Qt (QFileDialog&QColorDialog&QFontDialog) 对话框实战
    97
  • 8
    Qt 布局(QSplitter 类&QDockWidget 类) 总结
    533
  • 9
    Qt 布局(QLayout 类&QStackedWidget 类) 总结
    358
  • 10
    Qt 输入组控件(Input Widgets）& 显示组控件(Display Widgets）详解
    312

    • 相关课程

    更多
  • “堆友”基于Stable Diffusion绘图的提示词原理和概论
  • 【视觉与图像】Python+OpenCV教程入门篇-1月16日更新
  • 【数据可视化】基础数据画图

    • 相关电子书

    更多
  • WebGL 在前端可视化中的实践
  • 复杂环境下的视觉同时定位与地图构建
  • UI2CODE智能生成flutter代码--整体架构 【上叶】

    • 相关实验场景

    更多
  • 【图生图】一键部署3D卡通风格模型
  • 图表样式智能美化工具

    • 推荐镜像

    更多
  • qt
  • blender
  • cygwin
    • 下一篇
    阿里云OSS设置跨域访问