基于Qt/QChart实现折线图和散点图的绘制示例程序解析

1. 项目简介

本文讲解的是一个基于Qt 框架的QChart 模块实现的折线图与散点图结合的绘制程序。程序通过自定义类LineChartWithGradient实现折线图、散点图以及带有渐变填充的区域图，最终形成一个美观的数据可视化效果。

2. 类构造函数

cpp 复制代码

LineChartWithGradient::LineChartWithGradient(QWidget *parent)
    : QChartView(new QChart(), parent), m_series(new QLineSeries()), m_markerSeries(new QScatterSeries()), m_areaSeries(new QAreaSeries()) {

QChartView：用于显示图表的控件。
QLineSeries：用于绘制折线图的数据系列。
QScatterSeries：用于绘制散点图的数据系列。
QAreaSeries：实现区域填充，显示折线图下方的渐变颜色。

构造函数将这些系列对象初始化并将它们添加到图表中，确保折线图与散点图同步显示。

3. 添加折线、散点和区域系列

cpp 复制代码

    m_areaSeries->setUpperSeries(m_series);  // 关联折线图与区域图
    m_markerSeries->setMarkerShape(QScatterSeries::MarkerShapeCircle);  // 设置散点图点的形状
    m_markerSeries->setMarkerSize(10.0);  // 设置点的大小
    m_markerSeries->setColor(Qt::red);  // 设置点的颜色

    chart()->addSeries(m_areaSeries);  // 将区域系列添加到图表
    chart()->addSeries(m_series);  // 添加折线系列
    chart()->addSeries(m_markerSeries);  // 添加散点系列

setUpperSeries ：将m_series折线系列设置为区域系列的上边界。
QScatterSeries：设置散点的形状为圆形，大小为10像素，颜色为红色。
addSeries：将不同系列添加到图表，使得折线、区域和散点能够在同一图表中渲染。

4. 数据点设置

cpp 复制代码

void LineChartWithGradient::setData(const QList<QPointF> &points) {
    m_series->replace(points);
    m_markerSeries->replace(points);
    applyGradient();  // 应用渐变效果
    chart()->update();
}

**setData**方法将数据点替换为传入的QList<QPointF>，确保折线图和散点图的数据同步更新。
applyGradient：在数据更新后重新应用渐变填充效果。

5. 坐标轴范围设置

cpp 复制代码

void LineChartWithGradient::setXMinMaxvalue(const qreal min, const qreal max) {
    chart()->axes(Qt::Horizontal).first()->setRange(min, max);  // 设置X轴范围
}
void LineChartWithGradient::setYMinMaxvalue(const qreal min, const qreal max) {
    chart()->axes(Qt::Vertical).first()->setRange(min, max);  // 设置Y轴范围
}

**setXMinMaxvalue和 setYMinMaxvalue**分别设置了图表X轴和Y轴的最小和最大值，确保图表在特定的范围内展示。

6. 初始化图表和样式

cpp 复制代码

void LineChartWithGradient::setupChart() {
    chart()->setTitle(tc("散点渐变折点图"));  // 设置图表标题
    QPen pen(Qt::red);
    pen.setWidth(2);  // 设置折线的宽度
    m_series->setPen(pen);  // 应用折线的画笔样式
    applyGradient();  // 应用渐变效果
}

**setupChart**方法主要用于设置图表的初始样式，包括图表标题、折线宽度等。折线的宽度设置为2像素，颜色为红色。

7. 应用渐变效果

cpp 复制代码

void LineChartWithGradient::applyGradient() {
    QLinearGradient gradient(QPointF(0, 0), QPointF(0, 1));  // 定义线性渐变
    gradient.setColorAt(0.0, Qt::red);  // 渐变起始颜色为红色
    gradient.setColorAt(1.0, Qt::transparent);  // 渐变终止颜色为透明
    gradient.setCoordinateMode(QGradient::ObjectBoundingMode);  // 以对象坐标模式计算渐变
    m_areaSeries->setBrush(gradient);  // 设置区域系列的画刷为渐变效果
    m_areaSeries->setPen(Qt::NoPen);  // 区域图无边框
}

**applyGradient**方法用于实现区域图的渐变效果。使用了QLinearGradient类实现线性渐变，从红色渐变到透明，并将其设置为QAreaSeries的填充画刷。

8. 图表效果展示

从附带的图片可以看出，图表包括以下几个部分：

折线图显示数据的变化趋势。
散点图标注了每个数据点的位置，圆点较大，颜色为红色。
折线图下方有红色渐变填充区域，使得图表更具视觉效果。
X轴和Y轴都有明确的标度，背景采用深色主题，图表风格简洁明了。

总结

该程序通过Qt提供的图表模块，结合折线、散点和渐变区域图，实现了一个漂亮的散点折线图。程序中使用了大量自定义设置，例如图表样式、渐变效果等，使得图表在呈现数据的同时具有良好的视觉效果。

这种图表适用于展示数据变化趋势，同时突出关键数据点的情境，适合需要清晰展示和标记数据点的场景。