qchart怎么提升_Qt开发技术：QCharts（四）QChart面积图介绍、Demo以及代码详解

最新推荐文章于 2024-05-05 17:26:18 发布
最新推荐文章于 2024-05-05 17:26:18 发布
阅读量395 收藏 1
点赞数
文章标签： qchart怎么提升
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39702400/article/details/111750178
版权

前言

红胖子，来也！

按照顺序，本章为面积图。

补充

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 list;

list.append(_pLineSeries);

list.append(_pLineSeries2);

list.append(_pLineSeries3);

list.append(_pLineSeries4);

for(int index = 0; index < 4; index++)

{

QList 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);

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 list;

list.append(_pLineSeries);

list.append(_pLineSeries2);

list.append(_pLineSeries3);

list.append(_pLineSeries4);

for(int index = 1; index < 4; index++)

{

QList 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(_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(_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 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 list;

list.append(_pLineSeries);

list.append(_pLineSeries2);

list.append(_pLineSeries3);

list.append(_pLineSeries4);

for(int index = 0; index < 4; index++)

{

QList 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 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

增加面积图

对折线图、曲线图和面积图增加数据点显示、数据点标签显示

weixin_39702400
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
qchart怎么提升_如何在数据添加到QLineSeries后更新/重绘QChart？
weixin_39535557的博客
12-20 1008
我生成一些数据，我想要使用QChart &朋友。这是我第一次使用QChart，所以基本上我所做的就是复制QLineSeries Example并将其修改为我的需要。我当前的代码如下所示：如何在数据添加到QLineSeries后更新/重绘QChart？quint64 last=0;quint64 *lastp=&last;MainWindow::MainWindow(QWidget ...
Qt扫盲-QAreaSeries理论总结
洪源兄
05-13 752
QAreaSeries类以面积图的形式显示数据。QAreaSeries用于显示定量数据。它基于QLineSeries 类，边界线条之间的区域用颜色强调。由于QAreaSeries是基于直线序列的，所以QAreaSeries构造函数需要两个个QLineSeries实例，它定义了区域的上边界。面积图默认以图形区域的底部为下边界绘制。下边界可以用另一条线指定，而不是图形区域的底部。在这种情况下，QAreaSeries应该用两个QLineSeries实例初始化。
QChart的简单使用
weixin_42692504的博客
06-22 2万+
Qt 一般使用图标等一般是使用QChart (Qt5.7以后才有) 或者QCustomPlot (自定义图标来绘制图标) QWT第三方控件。 使用QChart 要在安装Qt的选择QChart 模块 否则 不能使用！！！ 我用的是Qt5.8的就跟多案例 我就随便距离几个把 饼状图 主要代码 m_chart = new QChart(); QPieSeries *series = new QPieSeries(); //连续的餅图数据 series->append("水果:30%", 3);
QT——Qchart实时动态曲线绘制
qq_50532267的博客
10-22 1万+
以下绘制以时间为横坐标，以随机数为纵坐标的实时动态曲线，此例子是每隔1s更新曲线。
Qt应用开发(拓展篇)——图表 QChart
最新发布
波塞冬的博客
05-05 1237
QChart是一个图形库模块，它可以实现不同类型的序列和其他图表相关对象(如图例和轴)的图形表示。要在布局中简单地显示图表，可以使用QChartView来代替QChart。此外，线条、样条、面积和散点序列可以通过使用类表示为极坐标图。下面是一些简单数据的图标样式，区域图表、柱状图表、折线图表、饼状图表等。而得到的极坐标图以圆形图形表示数据，其中数据的放置基于与图形中心(极点)的角度和距离。但实际项目中上，我们用的最多的就是折线和柱状图表，做一些波形显示和能量统计。
QChart数据可视化应用
weixin_42887343的博客
05-28 4329
前言 定义 数据可视化的定义有很多,像百度百科的定义是：数据可视化，是关于数据视觉表现形式的科学技术研究。其中，这种数据的视觉表现形式被定义为，一种以某种概要形式抽提出来的信息，包括相应信息单位的各种属性和变量。其实就是利用运用计算机图形学、图像、人机交互等技术，将采集或模拟的数据映射为可识别的图形、图像，说白了就是使用图像形式展示数据。 分类 常用的数据可视化有柱状图、线状图、条形图、面积图、饼图、点图、仪表盘、走势图外，还有和弦图、圈饼图、金字塔、漏斗图、K线图、关系图、网络图、玫瑰图、帕累托图、数学公
QChart动态曲线(支持缩放)
01-08
QT5.9平台开发，USB转串口数据采集，可实现串口接收、发送调试。在实现串口调试的基础功能上，实现绘制多条动态曲线，支持曲线放大、缩小功能。
qcharts控件如何提升
biao2488890051的博客
06-11 463
项目的.pro文件中，加入QT+= charts mainwindow.h加入 #include QT_CHARTS_USE_NAMESPACE，注意：不是在mainwindow.cpp加入该代码，不然下面的提升操作，编译后会提升找不到类。 ui界面拖入一个widget，然后提升为QChartView。
Qt Widget提升为QChartView绘制曲线
weixin_45571586的博客
06-26 1614
Widget提升为QChartView绘制曲线
如何将QGraphicsView提升为QChartview教程
m0_73450520的博客
12-08 1208
3.在ui界面中拖入一个graphicsView（或）控件，然后右击提升为QChartView类，如下图，点击添加，选中 点击提升；QChart的显示容器创建完成。2.添加：QT_CHARTS_USE_NAMESPACE，或者：using namespace QtCharts;1.在.pro文件中添加：QT += charts。记住，一定要加在两个.h文件中间，不然会报错。
huitu16_串口_QChart绘图_QT_
10-01
编写串口，通过与虚拟串口相连，从中获取数据并显示在chartview中。
QtChartsTest.rar_QT动态曲线_Qcharts_chapter7ld_linux qt qcharts_qt
07-14
qt 插件qcharts动态实时显示曲线
ebf_linux_qt_demo:embedfire Linux Qt演示
03-08
Qt5-demo源码介绍，本程序是基于Qt5开发的，不支持Qt4直接编译。 FileApp.pro为多工程目录，里面的QtUi为demo的自定义基础控件库。皮肤为皮肤资源文件。这两个都是必须的，且比较重要。 App为演示的综合程序，即...
Qt QChart 创建图表
Doyoung
12-20 631
Qt QChart 创建图表 文章目录Qt QChart 创建图表效果流程 效果 流程 #mermaid-svg-7VAoyhmAHAE9ZVNm .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-7VAoyhmAHAE9ZVNm .label text{fill:#333}#mermaid-svg-7VAoyhm
Qchart使用，最终实现UI界面可添加Qweight的控件可提升为自定义的类，且只需要提升类即可实现曲线的坐标轴、新增曲线、标点，点击图例实现图线显示隐藏
物极必反的博客
11-21 1528
先看一下预览效果，刚写完callout，所以比较凸显这个，下面开始逐个描述功能。 Qchart这块我看了些文章，就是把自己需要的各种功能整合成自己的类。继承没学好，这块对我来说真的难，其他的难点就是各部分功能怎么实现了，这个相对来说搜一下都能找到。 类结构： Mychart–>Callot–>Mychart |______________| 因为我的C++继承学的不太好，继承方便会有...
QtChart——简单的动态波形图
热门推荐
胧霖的博客
11-17 4万+
众所周知Qt 5.7过后Qt添加了官方的Chart库，终于告别了QWT和QCustomerPlot的大航海时代，成为了海贼王，最后登上创界山，打败了比克大魔王，成为了羊村的新族长。。。。。扯远了，本文只是简单的融合了几个Qt官方例子（并且把他们的文件头给删了，希望Qt官方不会来打我）。程序运行图如下： 功能点 数据动态更新 放大缩小 比例复原 坐标显示 图像拖拽 功能点其实大家来看博客，就是来看有
QT QGraphicsView 提升到 QChartView报错 解决方案
Walker随笔
05-09 3748
QT,QGraphicsView,QChartView,QGraphicsView提升,编译报错, QGraphicsView提升QChartView编译报错,编译报错解决方案
qtvs添加qchart_QT5的QChart使用记录
05-23
接下来，可以在代码中创建一个QChart对象，将数据添加到其中，以及将它们显示在一个QChartView中。 以下是一个简单的示例代码，它创建了一个简单的线状图： ```cpp #include <QtWidgets/QApplication> #include ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值