QChart折线图绘制合并

QtChart QT

Qt Charts 概述

Qt Charts 模块是一组易于使用的图标组件，它基于 Qt 的 Graphice View 架构，其核心组件是 QChartView 和 QChart。QChartView 的父类是 QGraphicsView，就是 Graphics View 架构中的视图组件，所以，QChartView 是用于显示图标的视图。

QChart 的继承关系如图：

可以看到，QChart 是从 QGraphicsItem 继承而来的，所以，QChart 是一种图形像。

QPolarChart 是用于绘制极坐标图的图表类，它从 QChart 继承而来。

想要使用 Qt Charts 模块，必须在项目的配置文件重添加模块。

Plain Text Qt += charts

在需要使用 QtCharts 的类的头文件或者源文件中，需要使用如下的包含语句：

# include
using namespace QtCharts;

或者可以使用宏定义：

# include
Qt_CHARTS_USE_NAMESPACE

简单的 QChart 绘图程序

首先用一个简单的例子来说明 QChart 绘图的基本原理。创建一个基于 QMainWindow 的应用程序，主窗口上不防止任何组件。在主窗口类中只定义一个 createChart () 函数，在主窗口的构造函数中调用此函数，如下：

MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent) , ui(new Ui::MainWindow) { ui->setupUi(this); createChart(); }

createChart () 函数用于创建图表，代码如下：

void MainWindow::createChart() { // 创建图表 
QChartView* chartView = new QChartView(this); // 创建 
ChartView QChart* chart = new QChart(); // 创建 chart 
chart->setTitle("简单函数曲线"); 
chartView->setChart(chart); // Chart添加到ChartView
this->setCentralWidget(chartView);

// 创建折线序列
QLineSeries* series0 = new QLineSeries();
QLineSeries* series1 = new QLineSeries();
series0->setName("Sin");
series1->setName("Cos");
chart->addSeries(series0);
chart->addSeries(series1);

// 序列添加数值
qreal t = 0, y1, y2, intv = 0.1;
int cnt = 100;
for (int i = 0; i < cnt; i++) {

    y1 = qSin(t);
    series0->append(t, y1);
    y2 = qSin(t + 20);
    series1->append(t, y2);
    t += intv;
}

// 创建坐标值
QValueAxis* axisX = new QValueAxis();
axisX->setRange(0, 10);
axisX->setTitleText("time(secs)");

QValueAxis* axisY = new QValueAxis();
axisY->setRange(-2, 2);
axisY->setTitleText("value");

chart->setAxisX(axisX, series0);
chart->setAxisY(axisY, series0);
chart->setAxisX(axisX, series1);
chart->setAxisY(axisY, series1);

}

在 createChart () 函数中，首先创建一个 QChartView 对象 chartView，再创建一个 QChart 对象 chart，将 chart 在 chartVIew 里显示，使用下面这行语句：

chartView->setChart(chart);

图表上用于显示数据的称为序列（series），这里使用折线序列 QLineSeries，创建了两个 QLineSeries 类型的序列，并且将序列添加到 chart 中。

chart->addSeries(series0); chart->addSeries(series1);

序列存储用来显示数据，所以需要为直线序列添加平面数据点的坐标数据。程序将生成正弦和余弦函数的数据作为序列数据。

序列好需要坐标轴，创建 QValueAxis 类型的坐标轴作为图表的 X 轴和 Y 轴，调用 QChart 的 setAxisX () 和 setAxisY () 函数为两个序列分别设置 X 轴和 Y 轴。

图表的主要组成部分

QChartView 的功能

QChartView 是 QChart 的视图组件，类似 Graphics View 架构中的 QGraphicsView。实际上，在窗口设计界面上使用 QChartView 时，就是先放置一个 QGraphicsView 组件，然后升级为 QChartView。

QChartView 类定义的函数很少，只有下面几个。

void setChart(QChart* chart)，设置一个 QChart 对象作为显示的图表。
QChart* chart()，返回 QChartView 当前设置的 QChart 类对象。
void setRubberBand(RubberBands &rubberBand)，设置选择框的类型，即鼠标在视图组件上拖动选择范围的方式，是一个 QChartView::RubberBand 枚举类型的组合，QChartView::RubberBand 枚举类型有以下几种取值：
QChartView::NoRubberBand：无选择框；
QChartView::VerticalRubberBand：垂向选择；
QChartView::HorizontalRubberBand：水平选择；
QChartView::RectangleRubberBand：矩形框选择。
RubberBands rubberBand()，返回设置的选择框类型。

序列

序列是数据的表现形式，上图就是两个 QLineSeries 类型的序列。序列的继承关系如下：

从上图可以看出序列类的继承关系，他们都是从 QAbstractSeries 类继承而来。折线、光滑曲线和散点的序列是从 QXYSeries 继承而来，用于绘制二维平面数据；QAbstractBarSeries 派生出柱状图、百分比柱状图和堆叠图等图标的序列；面积图、火柴盒图、饼图的序列都是直接继承于 QAbstractSeries。

坐标轴

图例

图例（Legend）是对图表上显示的序列的示例说明，有线条颜色和文字说明。QLegend 是封装了图例控制功能的类，可以为每个序列设置图例中的文字，可以控制图例显示在图表的上、下、左、右不同位置。

这一篇我们详细介绍图表各个部分的设置和操作，包括图表的标题、图例、边距等属性设置，QLineSeries 序列的属性设置，QValueAxis 坐标轴的属性设置，以及图标的缩放。（这些应该都是在实际的 Qt 开发中比较常用的图表操作）先看运行时的界面：

界面设计

工具栏：创建几个 Action，并创建工具栏，实现图表数据刷新和缩放功能。
主工作区图标视图：从组件面板放置一个 QGraphics View 组件作为视图组件，并用 Promote 方法升级为 QChartView 组件，命名为 chartView。
图表属性设置面板：左侧是一个 QToolBox 组件，分为 3 个操作面板，用于进行图表设置、曲线设置和坐标轴设置。

主窗口类的定义和初始化

下面是主窗口类 MainWindow 的类定义（省略了 Action 和界面组件的槽函数定义）。在 mainwindow.h 文件重需要包含 QtChart，并使用宏 QT_CHARTS_USE_NAMESPACE 导入命名空间。

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QtCharts>
QT_CHARTS_USE_NAMESPACE
QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

private:

    QLineSeries* curSeries; // 当前序列
    QValueAxis* curAxis; // 当前坐标轴
    void createChart(); // 创建图表
    void prepareData(); // 更新数据
    void updateFromChart(); // 从图表更新到界面

private:
    Ui::MainWindow *ui;
};
#endif // MAINWINDOW_H

在 MainWindow 类中定义了两个私有的变量，curSeries 用于指向当前的 QLineSeries 序列，界面上对序列的设置操作都是针对当前选择的序列；curAxis 用于指向当前的 QValueAxis 坐标轴，对坐标轴进行设置时就是针对当前坐标轴进行设置。

createChart() 函数用于创建图表的各个基本部件，在构造函数里调用，prepareData() 用于更新序列的数据，updateFormChart() 用于读取图表的一些属性，并刷新界面显示。下面是主窗口构造函数，以及这 3 个函数的代码。

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    createChart(); // 创建图表
    prepareData(); // 生成数据
    updateFromChart(); // 从图表获取属性值，刷新到界面显示
}

void MainWindow::createChart()
{
    QChart* chart = new QChart();
    chart->setTitle("简单函数曲线");
    ui->chartView->setChart(chart);
    ui->chartView->setRenderHint(QPainter::Antialiasing); // 抗锯齿，平滑

    QLineSeries* series0 = new QLineSeries();
    QLineSeries* series1 = new QLineSeries();
    series0->setName("Sin 曲线");
    series1->setName("Cos 曲线");
    curSeries = series0;

    QPen pen;
    pen.setStyle(Qt::DotLine);
    pen.setWidth(2);
    pen.setColor(Qt::red);
    series0->setPen(pen);
    pen.setStyle(Qt::SolidLine);
    pen.setColor(Qt::blue);
    series1->setPen(pen);
    chart->addSeries(series0);
    chart->addSeries(series1);

    QValueAxis* axisX = new QValueAxis();
    curAxis = axisX;
    axisX->setRange(0, 10);
    axisX->setLabelFormat("%.1f"); // 标签格式
    axisX->setTickCount(11); // 主分隔个数
    axisX->setMinorTickCount(9); // 次分隔个数
    axisX->setTitleText("time(secs)"); // 标题

    QValueAxis* axisY = new QValueAxis();
    axisY->setRange(-2, 2);
    axisY->setTitleText("value");
    axisY->setTickCount(5);
    axisY->setLabelFormat("%.2f");
    axisY->setMinorTickCount(4);

    chart->setAxisX(axisX, series0);
    chart->setAxisY(axisY, series0);
    chart->setAxisX(axisX, series1);
    chart->setAxisY(axisY, series1);
}

void MainWindow::prepareData()
{
    QLineSeries* series0 = (QLineSeries*)ui->chartView->chart()->series().at(0);
    QLineSeries* series1 = (QLineSeries*)ui->chartView->chart()->series().at(1);

    series0->clear();
    series1->clear();

    qsrand(QTime::currentTime().second()); // 初始化随机数
    qreal t = 0;
    qreal y1, y2;
    qreal intv = 0.1;
    qreal rd;
    int cnt = 100;

    for (int i = 0; i < cnt; i++) {

        rd = (qrand() % 10) - 5;
        y1 = qSin(t) + rd / 50;
        series0->append(t, y1);
        rd = (qrand() % 10) - 5;
        y2 = qCos(t) + rd / 50;
        series1->append(t, y2);
        t += intv;
    }
}

void MainWindow::updateFromChart()
{
    QChart* chart = ui->chartView->chart();
    ui->editTitle->setText(chart->title());
    QMargins mg = chart->margins(); // 边距
    ui->spinMarginTop->setValue(mg.top());
    ui->spinMarginLeft->setValue(mg.left());
    ui->spinMarginRight->setValue(mg.right());
    ui->spinMarginBottom->setValue(mg.bottom());
}

MainWindow 类个构造函数调用单个私有函数进行图表和界面的初始化。
createChart() 函数用于创建 QChart 对象，创建数据序列和坐标轴，并将这些部件组合成一个完整的图表。
prepareDate() 函数用于为图表重的两个序列生成数据，其中使用随机数，以便使得每次生成的数据稍有不同。
updateFromChart() 函数用于将图表重的标题和边距信息显示到窗口界面上。

笔画设置对话框 QWDialogPen

在这个 demo 中，需要设置一些对象的 pen 属性，比如折线序列的 pen 属性，网络先的 pen 属性等。pen 属性其实就是一个 QPen 对象，设置内容主要包括线型，线宽和颜色。为了使用方便，设计一个自定义对话框 QWDialogPen，专门用于 QPen 对象的属性设置。

QWDialogPen 是一个可视化设计的对话框，其类型定义如下：

class QWDialogPen : public QDialog
{
    Q_OBJECT

public:
    explicit QWDialogPen(QWidget *parent = nullptr);
    ~QWDialogPen();

    void setPen(QPen pen); // 设置Qpen，用于对话框界面显示
    QPen getPen(); // 获取对话框设置的QPen属性
    static QPen getPen(QPen iniPen, bool& ok); //静态函数

private slots:
    void on_btnColor_clicked();

private:
    Ui::QWDialogPen *ui;
    QPen m_pen;
};

QWDialogPen 类的 getPen() 以及相关函数的实现代码如下：

void QWDialogPen::setPen(QPen pen)
{
    m_pen = pen;
    ui->spinWidth->setValue(pen.width());
    int i = static_cast<int>(pen.style());
    ui->comboPenStyle->setCurrentIndex(i);
    QColor color = pen.color();
    ui->btnColor->setAutoFillBackground(true);
    QString str = QString::asprintf("background-color: rgb(%d,%d,%d);", color.red(), color.green(), color.blue());
    ui->btnColor->setStyleSheet(str);
}

QPen QWDialogPen::getPen()
{
    m_pen.setStyle(Qt::PenStyle(ui->comboPenStyle->currentIndex()));
    m_pen.setWidth(ui->spinWidth->value());
    QColor color = ui->btnColor->palette().color(QPalette::Button);
    m_pen.setColor(color);
    return m_pen;
}

QPen QWDialogPen::getPen(QPen iniPen, bool &ok)
{
    QWDialogPen* dlg = new QWDialogPen();
    dlg->setPen(iniPen);
    QPen pen;
    int ret = dlg->exec(); // 弹出对话框
    if (ret == QDialog::Accepted) {

        pen = dlg->getPen(); // 获取
        ok = true;
    }
    else {

        pen = iniPen;
        ok = false;
    }

    delete dlg; // 删除对话框对象
    return pen; //返回设置的QPen对象
}

静态函数 getPen() 里创建了一个 QWDialogPen 类的实例 dlg，然后调用 dlg→setPen(iniPen) 进行初始化，运行对话框并获取返回值，若返回值为 QDialog::Accepted，就调用 dlg→getPen() 获取设置属性后的 QPen 对象，最后删除对话框对象并返回设置的 Qpen 对象。所以，静态函数 getPen() 就是集成了普通方法调用对话框时创建对话框，设置初始值、获取对话框返回状态、获取返回删除对话框的过程，简化了调用代码。

QChart 设置

QChart 类的主要函数

通过图表的设置界面可以设置标题的内容和字体，可以设置图例的位置，是否显示，字体颜色和边距；可以设置动画效果和主题。

setAnimationOptions(AnimationOptions options) 函数设置图表的动画效果，输入参数是 QChart::AnimationOption 枚举类型，有以下取值：

QChart::NoAnimation：无动画效果；
QChart::GridAxisAnimations：背景网格有动画；
QChart::SeriesAnimations：序列有动画效果；
QChart::AllAnimations：都有动画效果。

主题是预定义的图表配色样式，是 QChart::ChartTheme 枚举类型，有多种取值。

图例是一个 QLegend 类对象，通过 QChart::legend() 可以获取图表的图例。图例是根据添加的序列自动生成的，但是可以修改一些属性，如：位置，文字和字体等。例如：

ui->chartView->chart()->legend()->setAlignment(Qt::AlignBottom);

void MainWindows::on_btnLegendFont_clicked() {

    QFont font = ui->chartView->chart()->legend()->font();
    bool ok = false;
    font = QFontDialog::getFont(&ok, font);
    if (ok) {
      ui->chartView->chart()->legend()->setFont(font);
    }
}

QLineSeries 序列设置

在这个项目中，我们使用的是 QLineSeries，他是 QXYSeries 的子类，用于绘制二维数据的折线图。QLineSeries 的主要函数（包括从父类集成的函数，省略参数）如下：

void MainWindow::on_radioSeries0_clicked()

{
    if (ui->radioSeries0->isChecked()) {
        curSeries = (QLineSeries*)ui->chartView->chart()->series().at(0);
    }
    else {
        curSeries = (QLineSeries*)ui->chartView->chart()->series().at(1);

    }
    ui->editSeriesName->setText(curSeries->name()); // 序列名称
    ui->chkSeriesVisible->setChecked(curSeries->isVisible()); // 序列可见性
    ui->chkPointVisible->setChecked(curSeries->pointsVisible()); // 数据点可见性
    ui->sliderSeriesOpacity->setValue(curSeries->opacity() * 10); // 透明度
    ui->chkPointLableVisible->setChecked(curSeries->pointLabelsVisible()); // 数据点标签可见性

}

curSeries 是在 MainWindow 类里定义的私有变量，用于指向当前操作的序列。选择序列后，会将当前序列的一些属性显示到界面上，如序列名称、序列可见性、序列数据点可见性等。
数据点标签的格式设置使用函数 setPointLabelsFormat() ，有两种数据库在数据点标签重显示，有固定标签：

@xPoint，数据点的 X 值；
@yPoint，数据点的 Y 值。
例如，使数据点标签只显示 Y 值，设置语句为：

curSeries->setPointLabelsFormat("@xPoint")

如果使数据点标签显示 (X,Y) 的值，设置语句为：

curSeries->setPointLabelsFormat("@xPoint,@yPoint")

为一个序列添加数据点，可以使用 append() 函数们也可以使用流操作符 <<，如 prepareData() 函数中添加一个数据点的不封可以改写为：

*series0 << QPointF(t, y1); // 序列添加数据点

为序列指定坐标轴，前面在 createChart() 函数中，使用 QChart 的函数为序列设置坐标轴：

chart->addAxis(axisX, Qt::AlignBottom);
chart->addAxis(axisY, Qt::AlignRight);
series0->attachAxis(axisX);
series0->attachAxis(axisY);
series1->attachAxis(axisX);
series1->attachAxis(axisY);

addAxis() 添加坐标轴到图表中，并且指定了方向。attachAxis() 函数为序列附加坐标轴。（需要注意的是，这是 Qt 5.12.1 之后的写法）

QValueAxis 坐标轴的设置

在这个 demo 中，我们使用 QValeAxis 类的坐标轴，也就是数值类型坐标轴，与 QLineSeries 正好配合使用。Qt 提供了好几种坐标轴类都是从 QAbstractAxis 类继承而来，这个我们前面说过了。QValueAxis 类的主要函数如下：（缺省了输入参数）

QValueAxis 坐标轴有以下几个组成部分：

坐标轴标题：坐标轴下方显示的文字，表示坐标轴名称，可以设置内容、字体、画刷和可见性。
轴线和刻度线：轴线是从左到右表示轴的直线，刻度线是垂直于垂直于轴线的短线，包括主刻度线和次刻度线，主刻格式是 tickCount()，每两个主刻度之间的次刻度的个数是 minorTickCount()。
轴标签：在主刻度处显示数值标签文字，可以控制其数值格式、文字颜色和字体等。
主网格线：在绘图区与主刻度相对应的网格线，可以设置颜色、线条的 Pen 属性和可见性等。
次网格线：在绘图区与次刻度相对应的网格线，可以设置颜色、线条的 Pen 属性和可见性等。

坐标轴设置界面的 UI 如下：

在界面上我们可以选择需要操作的坐标轴的对象，两个 RadioButton 按钮的响应代码相同。为 radioX 按钮编写事件槽函数，另一个按钮的槽函数里只要调用这个槽函数即可，代码如下：

void MainWindow::on_radioX_clicked()
{
    QList<QAbstractAxis*> axes;
    if (ui->radioX->isChecked()) {
        axes = ui->chartView->chart()->axes(Qt::Horizontal);
    }
    else {
        axes = ui->chartView->chart()->axes(Qt::Vertical);
    }

    curAxis = (QValueAxis*)axes[0];

    ui->spinAxisMin->setValue(curAxis->min());
    ui->spinAxisMax->setValue(curAxis->max());

    ui->editAxisTitle->setText(curAxis->titleText());
    ui->chkBoxAxisTitle->setChecked(curAxis->isTitleVisible());

    ui->editAxisLabelFormat->setText(curAxis->labelFormat());
    ui->chkBoxLabelsVisible->setChecked(curAxis->labelsVisible());

    ui->chkGridLineVisible->setChecked(curAxis->isGridLineVisible());
    ui->chkAxisLineVisible->setChecked(curAxis->isLineVisible());

    ui->spinMinorTickCount->setValue(curAxis->minorTickCount());
    ui->chkMinorTickVisible->setChecked(curAxis->isMinorGridLineVisible());
}

void MainWindow::on_radioY_clicked()
{
    on_radioX_clicked();
}

程序中 curAxis 是在 MainWindow 类中定义的私有变量，用于表示当前操作的坐标轴对象。获取对象后，首先获得轴对象的各种属性并显示在界面上。
在编辑框 editAxisLabelFormat 里设置格式字符串，例如“%. 2 f”，作为 QValueAxis::setLableFormat() 的输入参数。格式字符串的定义与 printf() 函数的格式字符串定义一样。

如果觉得文章对你有用，请随意赞赏

QChart折线图绘制合并

https://huangyanjie.com/archives/d3d73a73-d6da-4828-9f0e-c4f38a8ebd15

作者

Lenn

发布于

2025-03-19

更新于

2025-03-19

许可协议

CC BY 4.0

QChart折线图绘制合并

Qt Charts 概述

简单的 QChart 绘图程序

图表的主要组成部分

QChartView 的功能

序列

坐标轴

图例

界面设计

主窗口类的定义和初始化

笔画设置对话框 QWDialogPen

QChart 设置

QChart 类的主要函数

QLineSeries 序列设置

QValueAxis 坐标轴的设置

作者

发布于

更新于

许可协议

评论