一、QChart 介绍
QChart 模块是 Qt Charts 库的基础，提供了用于创建和显示各种类型图表的类和接口。Qt Charts 库是一个功能丰富、易于使用的数据可视化工具库，可以帮助开发者在应用程序中添加漂亮而又交互性强的图表。
QChart 模块主要包括以下类：
QChart：表示一个基本的图表容器，它可以包含一个或多个 QAbstractSeries 对象。开发者可以设置图表的标题、动画效果、背景、边框以及坐标轴等属性，并添加或移除序列数据。
QAbstractSeries：表示一个序列数据，它是 QLineSeries、QScatterSeries 等具体序列类型的基类，开发者可以通过继承该类来创建自定义序列类型。
QLineSeries：表示一条折线序列，它可以用于绘制单一或多条折线曲线图。
QScatterSeries：表示一个散点图序列，它可以用于绘制数据点之间的离散分布情况。
QBarSeries：表示一个条形图序列，它可以用于展示分类数据在不同类别中的分布情况。
QPercentBarSeries：表示一个百分比条形图序列，它可以用于展示分类数据在不同类别中的占比情况。
QPieSeries：表示一个饼图序列，它可以用于展示不同数据之间的占比关系。
QChartView：表示 QChart 对象的视图类，开发者可以将 QChart 对象设置为 QChartView 的子对象，并添加到窗口中以便显示。
通过使用 QChart 模块，开发者可以轻松地创建并自定义各种类型的图表，例如折线曲线图、散点图、条形图、饼图等，并以交互性强的方式来展示数据，为应用程序增加了更多的可视化效果。
下面是通过折线图显示 3 个设备的温度变化趋势效果:
二、实现代码(1)
以下是使用 QChart 显示 3 个折线图，表示 3 个设备的温度曲线的实现代码： （温度数据是模拟的数据）
#include <QtWidgets/QMainWindow>#include <QtCharts/QChart>#include <QtCharts/QLineSeries>#include <QtCharts/QChartView>#include <QtCore/QRandomGenerator>#include <QtCore/QDebug>#include <QtGui/QWindow>
QT_CHARTS_USE_NAMESPACE
class MainWindow : public QMainWindow{ Q_OBJECT
public: MainWindow(QWidget *parent = nullptr) : QMainWindow(parent) { // 数据初始化 for (int i = 0; i < 30; i++) { m_data[0].append(QPointF(i, QRandomGenerator::global()->bounded(10, 30))); m_data[1].append(QPointF(i, QRandomGenerator::global()->bounded(20, 40))); m_data[2].append(QPointF(i, QRandomGenerator::global()->bounded(30, 50))); }
// 创建线性图对象 QChart* chart = new QChart(); chart->setTitle("Temperature Data"); chart->setAnimationOptions(QChart::SeriesAnimations);
// 创建线序列对象 QLineSeries* series1 = new QLineSeries(chart); QLineSeries* series2 = new QLineSeries(chart); QLineSeries* series3 = new QLineSeries(chart);
// 设置线颜色、名字和宽度 series1->setColor(Qt::red); series1->setName("Device1"); series1->setPen(QPen(Qt::red, 2));
series2->setColor(Qt::green); series2->setName("Device2"); series2->setPen(QPen(Qt::green, 2));
series3->setColor(Qt::blue); series3->setName("Device3"); series3->setPen(QPen(Qt::blue, 2));
// 添加数据到线序列对象 for (const QPointF& point : m_data[0]) { *series1 << point; } for (const QPointF& point : m_data[1]) { *series2 << point; } for (const QPointF& point : m_data[2]) { *series3 << point; }
// 添加线序列对象到图表 chart->addSeries(series1); chart->addSeries(series2); chart->addSeries(series3);
// 设置横轴和纵轴标签 QValueAxis* axisX = new QValueAxis(); axisX->setTitleText("Time (s)"); axisX->setRange(0, 29);
QValueAxis* axisY = new QValueAxis(); axisY->setTitleText("Temperature (℃)"); axisY->setRange(0, 60);
// 添加横轴和纵轴到图表 chart->setAxisX(axisX); chart->setAxisY(axisY);
// 创建图表视图 QChartView* chartView = new QChartView(chart); chartView->setRenderHint(QPainter::Antialiasing); setCentralWidget(chartView); }
private: // 存储温度数据的二维数组 QVector<QPointF> m_data[3];};
int main(int argc, char *argv[]){ QApplication a(argc, argv); MainWindow w; w.show(); return a.exec();}
复制代码
以上是一个完整的 Qt 窗口程序，可以直接运行并显示 3 个设备的温度曲线。
在程序中，使用 QChart 对象作为图表容器，创建了 3 个 QLineSeries 对象用于展示 3 个设备的温度数据，并将它们添加到 QChart 对象中。自定义了横轴和纵轴标签及范围，并将它们添加到 QChart 对象中。最后，创建了一个 QChartView 对象，并将 QChart 对象设置为其子对象，以展示整个温度曲线图表。
三、实现代码(2)
如果自己需要设计 UI 界面，添加 QChart 显示折线图。下面演示一下过程。
【1】添加模块
【2】设计 UI
【3】设计代码-头文件
#ifndef WIDGET_H#define WIDGET_H
#include <QWidget>
// 包含line chart需要的头文件#include <QtCharts/QChart>#include <QtCharts/QLineSeries>#include <QtCharts/QChartView>#include <QtCore/QRandomGenerator>#include <QValueAxis>#include <QScatterSeries>
// 引用命名空间QT_CHARTS_USE_NAMESPACE
QT_BEGIN_NAMESPACEnamespace Ui { class Widget; }QT_END_NAMESPACE
class Widget : public QWidget{ Q_OBJECT
public: Widget(QWidget *parent = nullptr); ~Widget();
private: Ui::Widget *ui;
QChart *chart; QChartView *chartView;};#endif // WIDGET_H
复制代码
【3】设计代码-源文件
#include "widget.h"#include "ui_widget.h"
Widget::Widget(QWidget *parent) : QWidget(parent) , ui(new Ui::Widget){ ui->setupUi(this);
// 存储温度数据的二维数组 QVector<QPointF> m_data[3];
// 数据初始化 for (int i = 0; i < 30; i++) { m_data[0].append(QPointF(i, QRandomGenerator::global()->bounded(10, 30))); m_data[1].append(QPointF(i, QRandomGenerator::global()->bounded(20, 40))); m_data[2].append(QPointF(i, QRandomGenerator::global()->bounded(30, 50))); }
// 创建线性图对象 QChart* chart = new QChart(); chart->setTitle("Temperature Data"); chart->setAnimationOptions(QChart::SeriesAnimations);
// 创建线序列对象 QLineSeries* series1 = new QLineSeries(chart); QLineSeries* series2 = new QLineSeries(chart); QLineSeries* series3 = new QLineSeries(chart);
// 设置线颜色、名字和宽度// series1->setColor(Qt::red); series1->setName("Device1");// series1->setPen(QPen(Qt::red, 2));
// series2->setColor(Qt::green); series2->setName("Device2");// series2->setPen(QPen(Qt::green, 2));
// series3->setColor(Qt::blue); series3->setName("Device3");// series3->setPen(QPen(Qt::blue, 2));
// 添加数据到线序列对象 for (const QPointF& point : m_data[0]) { *series1 << point; } for (const QPointF& point : m_data[1]) { *series2 << point; } for (const QPointF& point : m_data[2]) { *series3 << point; }
// 添加线序列对象到图表 chart->addSeries(series1); chart->addSeries(series2); chart->addSeries(series3);
// 设置横轴和纵轴标签 QValueAxis* axisX = new QValueAxis(); axisX->setTitleText("Time (s)"); axisX->setRange(0, 29);
QValueAxis* axisY = new QValueAxis(); axisY->setTitleText("Temperature (℃)"); axisY->setRange(0, 60);
// 添加横轴和纵轴到图表 chart->setAxisX(axisX); chart->setAxisY(axisY);
// 创建图表视图 QChartView* chartView = new QChartView(chart); chartView->setRenderHint(QPainter::Antialiasing);
//将视图添加到布局 ui->view_verticalLayout->addWidget(chartView);}
Widget::~Widget(){ delete ui;}
复制代码
评论