Qt Charts介绍

视图-QChartView

图表-QChart

系列-QAbstractSeries

坐标轴-QAbstractAxis

图例-Legend

创建GUI界面

界面布局

完整代码

Qt Charts介绍

自从 Qt 发布以来，给广大跨平台界面研发人员带来了无数的福利。但是Qt自己却一直没有提供自带的图表库，这就使得 QWT、QCustomPlot 等第三方图表库有了巨大的生存空间，为了降低开发成本，大家都涌向了这些第三方库。这种情况一直持续到 Qt5.7 版本后 Qt Charts 的发布。Qt Charts 是 Qt 自带的组件库，包含折线、曲线、饼图、棒图、散点图、雷达图等等各种常用的图表。协议的约束：GPLV3。

视图-QChartView

负责 QChart 的展示。QChart 本身只负责图表内容的组织、管理。图表的展示由视图负责，这个视图就是 QChartView。QChartView 派生自 QGraphicsView，只是它专门提供了几个面向 QChart 的接口，比如 setChart（QChart*）等。

在 QtCreator 中使用 QChartView 可以放置一个 QWidget，然后升级为 QChartView。

QChartView 的内容很少，建议直接过一遍文档 QChartView

QChartView继承关系如下：

图表-QChart

QChart 管理不同类型的序列和其他与图表相关的对象，例如坐标轴及图例。

QChart 承担了一个组织、管理的角色。QChart 派生自 QGraphicsObject，因此它实际上是一个图元 item。我们可以从 QChart 获取到坐标轴对象、数据系列对象、图例等等，并且可以设置图表的主题、背景色等样式信息。

QChart 继承关系如下：

系列-QAbstractSeries

不论是曲线、饼图、棒图还是其他图表，其中展示的内容本质都是数据。一条曲线是一组数据，一个饼图也对应一组数据。在 Qt Charts 中，这些一组组的数据被称作系列。对应不同类型的图表 Qt 提供了不同的系列。系列除了负责存储、访问数据，应该还提供了数据的绘制方法，比如常用的折线图和曲线图分别对应 QLineSerie 和 QSPLineSerie。我们可以用不同的系列达到不同的展示目的。

常见的系列如下：

QBarSeries （柱状图）

QHorizontalBarSeries （水平柱状图）

QHorizontalPercentBarSeries （水平百分比柱状图）

QHorizontalStackedBarSeries （水平层叠图）

QPercentBarSeries （百分比柱状图）

QStackedBarSeries （层叠图/堆叠的条形图）

QAreaSeries （面积图）

QBoxPlotSeries （形图/盒须图）

QPieSeries （饼图）

QXYSeries （线性图、曲线图、散点图的基类）

QLineSeries （折线图）

QSplineSeries （曲线图）

QScatterSeries （散点图）

系列继承关系如下：

坐标轴-QAbstractAxis

图表中，一般都有 X、Y 坐标轴，复杂一些的还带有 Z 轴。对应到 Qt 的图表也有 X、Y 轴对象。坐标轴封装了刻度，标签，网格线，标题等属性。

坐标轴有以下几种：

QBarCategoryAxis
类别坐标轴，用字符串作为坐标轴的可读，用于图表的非数值坐标轴

QDateTimeAxis
时间坐标轴，用作时间数据的坐标轴

QLogValueAxis
对数数值坐标轴，作为数值类数据的对数坐标轴

QValueAxis
数值坐标轴，用作数值型数据的坐标轴

QCategoryAxis
分组数值坐标轴，可以为数值范围设置标签

坐标轴继承关系如下：

图例-Legend

图例是对图表上系列的补充说明。我们可以设置序列颜色及其文字说明、并控制序列显示的位置。

此外，图例中还有一个 QLegendMarker 类，可为每个序列的图例生成一个类似QChrckedBox 的组件；单击序列的标记，可以控制序列是否显示。

下面是官方例程 chartthemes 的运行效果。

上述内容，建议通过官方例程配合类文档学习。

创建GUI界面

需要在安装 Qt 时带上了 charts，否则后面工作无法开展。

对于编译方式安装的 Qt，需要注意在 configure 时不要跳过 charts。

对于安装包方式安装的 Qt，需要注意在安装时，确保 charts 组件被选中。

新建一个 Qt Widgets Application 项目。

在绘制 ui 窗体时，从 designer 的工具箱中选择一个 “Widget” 类型的控件，然后在它上面单击鼠标右键，选择 “提升为”。

在弹出的界面中，填写 "提升的类名称" 为: QChartView，头文件名称会自动生成，我们不用关心。然后单击“添加”按钮即可。

界面布局

完整代码

在 .pro 文件添加

QT  += charts
QT  += serialport serialbus

在 .h 文件添加

#include <QtCharts>         // QChart 所需的头文件#include <QModbusClient>    // 发送 Modbus 请求
#include <QModbusReply>     // 访问服务器后的回复
#include <QTimer>// 使用串行总线与 Modbus 服务器进行通信的 Modbus 客户端
#include <QModbusRtuSerialMaster>#include <QVariant>     // 这个类型充当着最常见的数据类型的联合
#include <QSerialPort>  // 串口IO操作
#include <QDebug>QT_CHARTS_USE_NAMESPACE     //声明 Qt Charts 的命名空间

widget.cpp 文件

#include "widget.h"
#include "ui_widget.h"const uint8_t xMax = 10;
const uint8_t yMax = 70;Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);modbus_init();charts_init();my_time = new QTimer ();my_time->setInterval(1000);connect(my_time, &QTimer::timeout, this, &Widget::timeout);
}Widget::~Widget()
{delete ui;
}void Widget::charts_init()      // 配置图表
{// 构建图表对象chart = new QChart ();chart->setTitle("温度曲线");   //图表的名字ui->widget->setChart(chart);    //将图表绑定到视图ui->widget->setRenderHint(QPainter::Antialiasing);//设置渲染：抗锯齿// 创建曲线系列mSeries = new QSplineSeries ();
//    mSeries->setColor(QColor(255, 0, 0));//曲线颜色mSeries->setName("温度"); //曲线名字chart->addSeries(mSeries);//将曲线系列添加到图表chart->setTheme(QtCharts::QChart::ChartThemeBrownSand);// 坐标轴mAxisY = new QValueAxis ();mAxisX = new QValueAxis ();mAxisX->setTitleText(QString(tr("时间(s)")));mAxisY->setTitleText(QString(tr("温度(℃)")));mAxisY->setRange(-20, yMax);// 坐标轴范围mAxisY->setTickCount(10);// 坐标轴分等份mAxisX->setRange(0, xMax);mAxisX->setTickCount(10);mAxisX->setLabelFormat("%.0f"); //坐标轴标签格式：每个单位保留几位小数mAxisX->setTitleFont(QFont("宋体"));
//    mAxisX->setLabelsVisible(false);    //隐藏坐标轴标签
//    mAxisX->setMinorTickCount(4); //每个单位之间绘制了多少虚网线
//    mAxisX->setGridLineVisible(false);  // 隐藏网格
//    mAxisX->setLabelsAngle(45);//字体倾斜角度
//    mAxisX->setLabelsColor(Qt::blue);
//    mAxisX->setLabelsEditable(true);// 图例QLegend *mlegeng = chart->legend();mlegeng->setAlignment(Qt::AlignBottom);// 图例在图表底部显示mlegeng->show();// 添加坐标轴（先添加轴到 Chart 上，再附加轴到 Series 上）chart->addAxis(mAxisX, Qt::AlignBottom);chart->addAxis(mAxisY, Qt::AlignLeft);mSeries->attachAxis(mAxisX);mSeries->attachAxis(mAxisY);// 隐藏背景
//    chart->setBackgroundVisible(false);// 设置外边界全都为 0chart->setContentsMargins(0, 0, 0, 0);// 设置内部边界全都为 0chart->setMargins(QMargins(0, 0, 0, 0));// 设置背景区域无圆角chart->setBackgroundRoundness(10);// 突出曲线上的点mSeries->setPointsVisible(true);
}void Widget::modbus_init()      // 配置传输协议
{modbusClient = new QModbusRtuSerialMaster ();//创建一个ModbusRTU通信的主机对象//设置通信的端口号、波特率、奇偶校验位、数据位、停止位modbusClient->setConnectionParameter(QModbusDevice::SerialPortNameParameter, QVariant("/dev/ttySTM2"));modbusClient->setConnectionParameter(QModbusDevice::SerialBaudRateParameter, QSerialPort::Baud9600);modbusClient->setConnectionParameter(QModbusDevice::SerialParityParameter, QSerialPort::NoParity);modbusClient->setConnectionParameter(QModbusDevice::SerialDataBitsParameter, QSerialPort::Data8);modbusClient->setConnectionParameter(QModbusDevice::SerialStopBitsParameter, QSerialPort::OneStop);modbusClient->setTimeout(1000);//如果在规定的超时内没有收到响应，则设置TimeoutErrormodbusClient->setNumberOfRetries(3);//设置客户端在请求失败前执行的重试次数bool ok = modbusClient->connectDevice();//连接设备if(ok){qDebug() << "Successful connect";}else{qDebug() << "Connect failure";}
}void Widget::ready_read()   // 读取数据并输出到图表
{auto reply = qobject_cast<QModbusReply *>(sender());if(reply == nullptr){qDebug() << "No response";return;}if(reply->error() == QModbusDevice::NoError){const QModbusDataUnit rev_data = reply->result();quint16 tempartureDate = rev_data.value(0);quint16 tempar = tempartureDate;qreal temparture = 0;if((tempar & 0x8000) == 32768){ //温度为负数tempartureDate &= 0x7fff;temparture = tempartureDate/10.0;QString str1 = QString("-%1").arg(temparture);   //将任何类型的数据转化为字符型数据ui->wendu_label->setText(str1);     //读取数据到 ui 界面}else{temparture = tempartureDate/10.0;QString str1 = QString("%1").arg(temparture);   //将任何类型的数据转化为字符型数据ui->wendu_label->setText(str1);     //读取数据到 ui 界面}// 系列添加数值static int count = 0;if(count > mAxisX->max()){mSeries->removePoints(0, mSeries->count() - xMax);chart->axisX()->setMin(count - xMax);chart->axisX()->setMax(count);}mSeries->append(count, temparture);count++;}else if(reply->error() == QModbusDevice::ProtocolError){qDebug() << "Data read protocol error" << reply->errorString();}else{qDebug() << "Other error" << reply->errorString();}
}void Widget::timeout()  // 定时器超时操作
{//0x04：要读取寄存器的起始地址； 2：表示读取几个寄存器QModbusDataUnit data(QModbusDataUnit::HoldingRegisters, 0x04, 2);//0x01：表示设备地址QModbusReply *reply = modbusClient->sendReadRequest(data, 0x01);if(reply == nullptr){qDebug() << "Read data failure: " << modbusClient->errorString();}if(!reply == isFullScreen()){connect(reply, &QModbusReply::finished, this, &Widget::ready_read);}
}void Widget::on_time_btn_clicked()
{my_time->start();
}void Widget::on_stop_btn_clicked()
{my_time->stop();
}

参考鸣谢

Qt Chart之绘制折线图：图表以及坐标轴设置_qt绘制折线图图标坐标轴设置_好奇松鼠的博客-CSDN博客

Qt - QTChart绘制图表_JYU_hsy的博客-CSDN博客

https://www.cnblogs.com/ybqjymy/p/13665040.html

Qt：QtCharts绘制图表实时采集温度相关推荐

Qt - QTChart绘制图表
文章目录前言准备工作安装QChart组件项目配置主要组成部分 QChartView QChart 序列坐标轴图例静态图表动态图表场景一思路效果核心实现场景二思路效果核 ...
qt +ChartDirector 绘制图表
自从开发由c#转入Qt后一直寻找一款Qt下的图形控件库,最后ChartDirector控件映入眼球.ChartDirector控件使用方便,快捷,灵活,功能强大,交互性强.在web服务器以及嵌入式应用 ...
（二）Qt多线程实现海康工业相机图像实时采集
系列文章目录提示:这里是该系列文章的所有文章的目录第一章: (一)Qt+OpenCV调用海康工业相机SDK示例开发第二章: (二)Qt多线程实现海康工业相机图像实时采集文章目录系列文章目录 ...
QT实现在图表顶部绘制一个附加元素（标注）
QT实现在图表顶部绘制一个附加元素项目简介项目技术项目展示主要源码片段解析获取完整项目源码传送门项目简介在图表顶部绘制一个附加元素(标注). 项目技术 qt5.12,qtchart模块, ...
QtCharts绘制动态心电图[1]——初步应用
文章目录在UI文件中添加Qtchart 初始化心电图函数心电图动态绘制主要代码开启定时器并绑定定时槽函数波形绘制函数程序相关说明写在最后先放效果图: 该效果图和目前网上的动态波形略有不同 ...
Android 活体人脸实时采集，百度、虹软
百度现在功能较少--使用虹软,方便虹软官网:https://ai.arcsoft.com.cn/ucenter/resource/build/index.html 申请应用,下载SDK即可虹软已修 ...
Python自动化办公：openpyxl绘制图表
在后台回复[阅读书籍] 即可获取python相关电子书~ Hi,我是山月. 之前给大家分享了openpyxl的基础和进阶教程: Python自动化办公:openpyxl教程(基础) Python自动化 ...
单片机驱动LM75采集温度
多种型号单片机驱动LM75采集温度 LM75简介引脚说明寄存器说明测试程序 arduino程序 89c51程序 STM32程序原文链接:https://www.yourcee.com/news ...
温度传感器采集温度数据通过网关上传至ThingsBoard平台
本文意在阐述: A设备采集温度数据,传到B设备的网关,由B设备的网关上传至搭建在C服务器上的TB平台的流程. 注: 本文所提及的设备指4B版本的树莓派步骤大致可以分为以下几点: 1 C服务器上搭建平 ...

Qt：QtCharts绘制图表实时采集温度

Qt Charts介绍

视图-QChartView

图表-QChart

系列-QAbstractSeries

坐标轴-QAbstractAxis

图例-Legend

创建GUI界面

界面布局

完整代码

参考鸣谢

Qt：QtCharts绘制图表实时采集温度相关推荐

最新文章

热门文章