C++ Qt开发：Charts折线图绘制详解

Qt 是一个跨平台C++图形界面开发库，利用Qt可以快速开发跨平台窗体应用程序，在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置，实现图形化开发极大的方便了开发效率，本章将重点介绍QCharts折线图的常用方法及灵活运用。

折线图（Line Chart）是一种常用的数据可视化图表，用于展示随着时间、类别或其他有序变量而变化的趋势。折线图通过将数据点连接起来形成折线，直观地展示了变量之间的趋势和关系。

折线图通常用于以下环境：

1. 时间序列数据： 显示随时间变化的数据趋势，例如股票价格、气温变化等。
2. 比较趋势： 可以比较不同组之间的趋势，例如不同产品的销售趋势。
3. 展示模式或关联关系： 用于显示变量之间的相关性或模式，例如销售额和广告投入之间的关系。

折线图的基本结构包括：

• 横轴（X轴）： 通常表示时间或类别。
• 纵轴（Y轴）： 表示变量的值。可以是数值，也可以是百分比或其他度量。
• 数据点： 在图表上表示具体的数据值的点。
• 折线： 将数据点连接起来的线，形成变化趋势。

在Qt中，可以使用图表库来创建折线图。通过在程序中添加相应的数据点，并设置合适的轴和样式，你可以轻松创建出漂亮且具有信息表达能力的折线图。

在之前的文章中笔者简单创建了一个折线图，由于之前的文章只是一个概述其目的是用于让读者理解绘图组件是如何被引用到项目中的，以及如何实际使用，本章我们将具体分析折线图的绘制功能，详细介绍图表各个部分的设置和操作，包括图标的标题、图例、边距等属性的设置，QLineSeries序列的属性设置，QValueAxis坐标轴的属性设置等，通过本章的学习读者可以掌握QChart绘图的核心方法。

1.1 图表设置

1.1.1 设置标题

首先我们来实现对图表的设置，通常情况下图表中的标题可以通过setTitle来设置，而通过setTitleFont可以设置标题字体，通常设置字体需要使用QFont类，以下是 QFont 类中常用的方法的说明和概述：

这些方法允许你设置和获取字体的各种属性，如族、大小、粗细、斜体等。你可以使用这些方法来创建和调整字体，以满足应用程序的设计需求。

通过创建一个 QFont 对象 titleFont，然后设置字体的家族、大小和粗细。最后，通过 setTitleFont 方法将这个字体应用到图表的标题上，具体实现代码如下所示；

// 设置顶部标题
chart->setTitle("系统性能统计图");

// 设置字体
QFont titleFont;
titleFont.setFamily("Arial");
titleFont.setPointSize(25);
titleFont.setBold(true);

// 设置图表标题的字体
chart->setTitleFont(titleFont);

你可以根据需要调整字体的其他属性，例如设置斜体、下划线等。调整 setFamily、setPointSize、setBold 等方法的参数，则用于控制这三个属性，当然如果不希望出现顶部提示则可以忽略设置setTitle属性；

1.1.2 图表主题

图表主题的选择可以通过setTheme属性设置，在Qt中默认支持的主题有8种可以选择，通过使用不同的属性可以设置不同的样式表或主题，以影响应用程序的外观和感觉。

• Light（亮）: 一种明亮的主题或样式，通常背景颜色较浅，前景颜色较深，使得界面看起来清晰明了。
• BlueCerulean（蓝天蓝）: 一个以蓝色为主调的主题，可能会给应用程序带来清新和现代的感觉。
• Dark（暗）: 一种较暗的主题，背景颜色可能较深，前景颜色相应较亮。适合创建更为暗调的用户界面。
• BrownSand（棕沙）: 以棕色为主的主题，可能给应用程序带来温暖和自然的感觉。
• BlueNcs（蓝NCS）: 一种以蓝色为主的主题，NCS 可能指的是一种颜色标准。
• HighContrast（高对比度）: 一个高对比度的主题，通常用于提供更好的可访问性，特别适用于视力受损的用户。
• BlueIcy（蓝冷）: 一种以蓝色为主，可能带有冷色调的主题。
• Qt（默认）: 使用 Qt 默认主题，这个主题通常会遵循操作系统的外观，保持一致性。

而同样的设置图表展示动画则可以通过setAnimationOptions属性来设置，通常动画属性有4种选项，这些设置通常用于控制图表和轴的动画效果。以下是简要说明：

1. NoAnimation（无动画）:
   • 不使用动画效果。图表和轴的状态变化将会立即生效，没有平滑的过渡效果。
2. GridAxisAnimations（轴网格动画）:
   • 使用动画效果来显示或隐藏轴的网格线。在显示或隐藏轴网格时，会有一个平滑的过渡效果。
3. SeriesAnimations（数据系列动画）:
   • 使用动画效果来显示或隐藏数据系列。当数据系列被添加或移除时，或者改变可见性时，会有平滑的过渡效果。
4. AllAnimations（所有动画）:
   • 同时启用轴网格动画和数据系列动画。这样会在显示或隐藏轴网格和数据系列时都有平滑的过渡效果。

这些效果的设置通常需要使用下标的方式，而下标索引是从0开始的，案例中我们使用Qt默认主题，并将动画AllAnimations完全启用，当然读者也可以将其定义为特定字符串方便使用，如下所示；

// ------------------------------------------
// 主题色定义
// ------------------------------------------
#define Theme_Light 0
#define Theme_BlueCerulean 1
#define Theme_Dark 2
#define Theme_BrownSand 3
#define Theme_BlueNcs 4
#define Theme_HighContrast 5
#define Theme_BlueIcy 6
#define Theme_Qt 7

// 设置图表主题
ui->graphicsView->chart()->setTheme(QChart::ChartTheme(Theme_Qt));

// ------------------------------------------
// 动画定义
// ------------------------------------------
#define NoAnimation 0
#define GridAxisAnimations 1
#define SeriesAnimations 2
#define AllAnimations 3

// 设置动画效果
ui->graphicsView->chart()->setAnimationOptions(QChart::AnimationOptions(AllAnimations));

当设置动画与主题色以后，再次打开程序此时就会展现出所有的过度动画以及默认的主题，如下图所示；

1.1.3 图例设置

图例设置，图例指的是上图中的顶部（一分钟负载、五分钟负载）的提示信息，通常是一个QLegend类的对象，通过QChart::legend()可以获取到图表的图例，图例是Qt组件根据数据集自动生成的，当然某些属性我们也是可以调整的，例如图例位置、颜色、字体等。

例如，设置图例在图标的上下左右四个方位，以下枚举常量代表了对齐方式，可以用于设置控件或绘图元素在其父元素中的位置。

1. Qt::AlignTop（顶部对齐）:
   • 控件或元素将与其父元素的顶部对齐。
2. Qt::AlignBottom（底部对齐）:
   • 控件或元素将与其父元素的底部对齐。
3. Qt::AlignLeft（左对齐）:
   • 控件或元素将与其父元素的左侧对齐。
4. Qt::AlignRight（右对齐）:
   • 控件或元素将与其父元素的右侧对齐。

这些对齐方式常用于设置布局、排列控件或绘图元素的位置。例如，当你使用布局管理器（如 QVBoxLayout 或 QHBoxLayout）时，可以通过设置对齐方式来控制子控件在父控件中的相对位置，同理当使用setAlignment()函数时就可以用于设置QChart图表中的图例位置。

// ------------------------------------------
// 设置图例属性
// ------------------------------------------

// 图例是否可见
ui->graphicsView->chart()->legend()->setVisible(true);

// 图例背景框是否可见
ui->graphicsView->chart()->legend()->setBackgroundVisible(false);

// 将图例设置到顶部
ui->graphicsView->chart()->legend()->setAlignment(Qt::AlignTop);

// 将图例设置到底部
ui->graphicsView->chart()->legend()->setAlignment(Qt::AlignBottom);

// 将图例设置到左侧
ui->graphicsView->chart()->legend()->setAlignment(Qt::AlignLeft);

// 将图例设置到右侧
ui->graphicsView->chart()->legend()->setAlignment(Qt::AlignRight);

如上代码所示，由于我们最终覆盖了上下左属性，图例将会停留在最右侧，输出效果图如下；

图例的字体与颜色也可以被自定义，字体的定义与顶部标题的定义相同，通过调用QFont来设置字体，通过QColor则用于设置颜色，字体类我们说过了，这里就说一下QColor中有哪些方法可以使用吧。

以下是 QColor 类中常用的方法的说明和概述：

这些方法允许你创建、操作和查询颜色对象的各种属性，包括RGB值、透明度、HSV值等。你可以使用这些方法来定制和操作颜色，以满足应用程序的设计需求。

由于我们并不是所有的参数都需要修改，所以可以先通过legend()->font()先将默认的属性读入，然后再其基础之上对特定的字体和颜色进行属性调整，如下我们分别调整字体颜色；

// ------------------------------------------
// 设置图例字体与颜色
// ------------------------------------------

// 获取当前字体
QFont font = ui->graphicsView->chart()->legend()->font();

// 设置字体
font.setFamily("Arial");
font.setPointSize(25);
font.setBold(true);

// 设置到页面
ui->graphicsView->chart()->legend()->setFont(font);

// 获取当前颜色
QColor color = ui->graphicsView->chart()->legend()->labelColor();

// 设置标签颜色
color.setRgb(170,0,255,255);

// 设置到页面
ui->graphicsView->chart()->legend()->setLabelColor(color);

运行后，我们可以看到图例中的数字变大了，并且居右侧对齐了，颜色则是紫色，如下图所示；

1.1.4 边距设置

边距的设置在多数时候是用不到的，因为Qt中默认的边距已经就很合理了，但是在某些时候边距也需要被调整，调整边距可以通过调用setMargins函数来实现，该函数需要接收QMargins类，该类常用于表示矩形边界。

以下是 QMargins 类中常用的方法的说明和概述：

QMargins 类表示矩形的边距，其包含了四个整数值，分别表示左、上、右、下的边距。这些方法允许你设置和获取边距的各个部分，进行边距的比较和运算等。这在界面布局和绘图等场景中经常用到，用于定义边距和间距。

边界的设置很简单，来看如下代码案例的演示，Qt中默认的边界值应该均为10这个可以自己去验证。

// ------------------------------------------
// 设置上下左右边界
// ------------------------------------------

QMargins mgs;

// 设置边界
mgs.setLeft(-10);
mgs.setRight(-10);
mgs.setTop(-10);
mgs.setBottom(-10);

// 刷新到图表
ui->graphicsView->chart()->setMargins(mgs);

当运行后，读者可观察图表中的变化，来体会边界值是什么，当然了如果读者设置的负数太大绘图很有可能脱离绘图区；

2.1 序列与坐标轴

2.1.1 QLineSeries序列类

首先在绘图之前，我们必须要先看一下QLineSeries折线图类，以及QValueAxis坐标轴类，此处如果读者需要绘制其他的图形，比如折线图中有另一种光滑折线图，则就需要使用QSplineSeries类，根据不同的图表需要使用不同的绘制类，此处我们就以普通折线图为例，让我们来看一下绘图类中所支持的接口吧。

QLineSeries 是 Qt 中用于绘制折线图的类，下面是关于 QLineSeries 常用的方法的说明和概述：

上述方法提供了一些基本的操作，例如追加、替换、移除数据点，以及设置折线的样式、颜色等属性。你可以根据需要使用这些方法来自定义和控制折线图的外观和行为。

首先我们先来实现对绘制线条的自定义，在创建序列线条时，我们通常会自定义线条的颜色，颜色的自定义可以使用QPen类来指定，以下是 QPen 类中常用的方法的说明和概述：

这些方法允许你设置和获取画笔的各种属性，如颜色、风格、宽度、样式等。QPen 类用于定义在绘图中如何绘制线条和边框。你可以使用这些方法来自定义画笔，以满足应用程序的设计需求。

当有了QPen类就可以对颜色进行自定义了，读者需要注意，曲线画笔中有一个setStyle属性，该属性是用于指定画笔风格的枚举值，常用于设置 QPen 的风格。以下是这些枚举值的说明：

1. Qt::SolidLine（实线）:
   • 表示使用实线绘制。
2. Qt::DashLine（短划线）:
   • 表示使用短划线绘制，即通过交替的短线和空白段绘制。
3. Qt::DotLine（点线）:
   • 表示使用点线绘制，即通过交替的点和空白段绘制。
4. Qt::DashDotLine（点划线）:
   • 表示使用点划线绘制，即通过交替的点、短划线和空白段绘制。

这些枚举值通常用于设置画笔的风格，当有了这些前置条件以后，相信读者能更容易地理解曲线序列是如何被创建出来的了，如下代码则是一个完整版的创建流程，读者可自行参考学习；

// ------------------------------------------
// 创建曲线序列
// ------------------------------------------

QLineSeries *series0 = new QLineSeries();
QLineSeries *series1 = new QLineSeries();

// 为序列设置名字
series0->setName("一分钟负载");
series1->setName("五分钟负载");

// 为曲线指定类型和属性
QPen pen;

// 设置线条类型：Qt::SolidLine, Qt::DashLine, Qt::DotLine, Qt::DashDotLine
pen.setStyle(Qt::DotLine);
pen.setWidth(2);             // 设置序列宽度
pen.setColor(Qt::green);     // 设置绿色
series0->setPen(pen);        // 折线序列的线条设置

// 设置线条类型：Qt::SolidLine, Qt::DashLine, Qt::DotLine, Qt::DashDotLine
pen.setStyle(Qt::SolidLine);
pen.setColor(Qt::blue);      // 设置蓝色
pen.setWidth(2);             // 设置序列宽度
series1->setPen(pen);        // 折线序列的线条设置

// 为序列曲线设置颜色
QColor color;
color.setRgb(170,0,255,255);   // 紫色配色
series0->setColor(color);      // 设置序列0

// 将序列添加到图表
chart->addSeries(series0);
chart->addSeries(series1);

// -----------------------------------------------
// 其他附加参数
// -----------------------------------------------

// 序列是否可见
series0->setVisible(true);
series1->setVisible(true);

// 序列的数据点是否可见
series0->setPointsVisible(true);
series1->setPointsVisible(false);

// 序列的数据点标签是否可见
series0->setPointLabelsVisible(false);
series1->setPointLabelsVisible(true);

// 序列数据点标签显示格式
series0->setPointLabelsFormat("(@xPoint,@yPoint)");
series1->setPointLabelsFormat("@yPoint");

// 序列透明度设置
series0->setOpacity(100/10.0);
series1->setOpacity(100/10.0);

// 设置序列数据点标签颜色
QColor scolor=series0->pointLabelsColor();

scolor.setRgb(170,0,255,255);
series0->setPointLabelsColor(scolor);
series1->setPointLabelsColor(scolor);

// 设置序列数据点标签字体
QFont font = series0->pointLabelsFont();
series0->setPointLabelsFont(font);

运行上述绘制代码，读者可以看到如下图所示的案例，这里之所以很乱是为了更好的演示函数功能，读者可以自行关闭这些选项后依次观察效果；

2.1.2 QValueAxis坐标轴类

接着我们就需要设置图表中的坐标轴参数，本例中我们使用QValueAxis类的坐标轴，这是数值型坐标轴，其刚好可以与QLineSeries配合使用，当如Qt中提供了许多坐标轴，但他们都是从QAbstractAxis类继承而来的。

QValueAxis 是用于处理数值轴的类，通常用于折线图、散点图等图表类型。以下是关于 QValueAxis 常用的方法的说明和概述：

这些方法提供了对数值轴的各种设置和属性获取，包括范围、刻度、标签、标题、网格线等。你可以使用这些方法来定制数值轴以满足你图表的需求。

如下是坐标轴的常用配置参数，读者可自行选择不同的函数设置使用，其完整代码如下所示；

// -----------------------------------------------
// 坐标轴配置
// -----------------------------------------------

// 创建坐标轴X
QValueAxis *axisX = new QValueAxis;

axisX->setRange(0, 10);             // 设置坐标轴范围
axisX->setLabelFormat("%.1f");      // 标签格式
axisX->setTickCount(11);            // 主分隔个数
axisX->setMinorTickCount(4);        // 设置轴上每个刻度之间的小刻度数量
axisX->setTitleText("X轴坐标");      // 标题

// 创建坐标轴Y
QValueAxis *axisY = new QValueAxis;
axisY->setRange(-2, 2);
axisY->setTitleText("Y轴坐标");
axisY->setTickCount(5);
axisY->setLabelFormat("%.2f");
axisY->setMinorTickCount(4);

// 设置坐标轴
chart->addAxis(axisX,Qt::AlignBottom);
chart->addAxis(axisY,Qt::AlignLeft);

 //序列 series0 附加坐标轴
series0->attachAxis(axisX);
series0->attachAxis(axisY);

//序列 series1 附加坐标轴
series1->attachAxis(axisX);
series1->attachAxis(axisY);

// -----------------------------------------------
// 其他附加参数
// -----------------------------------------------

// 刻度是否可见
axisX->setLineVisible(true);
axisY->setLineVisible(true);

// 坐标轴标题是否可见
axisX->setTitleVisible(true);
axisY->setTitleVisible(true);

// 轴的刻度标签是否可见
axisX->setLabelsVisible(true);
axisY->setLabelsVisible(true);

// 轴的网格线是否可见
axisX->setGridLineVisible(true);
axisY->setGridLineVisible(true);

// 次级刻度是否可见
axisX->setMinorGridLineVisible(true);
axisY->setMinorGridLineVisible(true);

// 设置坐标轴的标题的字体
QFont fontX=axisX->titleFont();
axisX->setTitleFont(font);

// 设置坐标轴刻度标签的文字颜色
QColor colorX=axisX->labelsColor();
axisX->setLabelsColor(colorX);

// 设置坐标轴刻度标签的文字字体
axisX->setLabelsFont(font);

// 网格线的颜色设置
QColor colorLine=axisX->gridLineColor();
axisX->setGridLineColor(colorLine);

// 网格线的Pen设置
QPen penW;
penW=axisX->gridLinePen();
axisX->setGridLinePen(penW);

// 设置线条颜色
axisX->setLinePen(penW);
axisX->setLinePenColor(color);

// 次级刻度网格线颜色
QColor colorC=axisX->minorGridLineColor();
axisX->setMinorGridLineColor(colorC);

// 次级刻度线Pen设置
QPen penC;
penC=axisX->minorGridLinePen();
axisX->setMinorGridLinePen(pen);

最后是对数据进行初始化，因为初始化数据之前需要拿到series对象的指针，当得到该指针后，就可以通过调用append()方法或者是<<符号进行数据的追加操作，每次递增intv循环直到cnt计数结束；

// ---------------------------------------------------
// 开始初始化数据
// ---------------------------------------------------

// 获取指针
series0=(QLineSeries *)ui->graphicsView->chart()->series().at(0);
series1=(QLineSeries *)ui->graphicsView->chart()->series().at(1);

// 清空图例
series0->clear();
series1->clear();

// 随机数初始化
qsrand(QTime::currentTime().second());

qreal t=0,y1,y2,intv=0.1;
qreal rd;
int cnt=100;
for(int i=0;i<cnt;i++)
{
    rd=(qrand() % 10)-5;       // 随机数,-5~+5
    y1=qSin(t)+rd/50;
    *series0<<QPointF(t,y1);   // 序列添加数据点
    // series0->append(t,y1);  // 序列添加数据点

    rd=(qrand() % 10)-5; //随机数,-5~+5
    y2=qCos(t)+rd/50;
    // series1->append(t,y2);  // 序列添加数据点
    *series1<<QPointF(t,y2);   // 序列添加数据点

    t+=intv;
}

运行后读者可以看到如下图所示的输出效果；