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

1. 项目简介

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

在这里插入图片描述

2. 类构造函数

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. 添加折线、散点和区域系列

    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. 数据点设置

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

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

5. 坐标轴范围设置

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. 初始化图表和样式

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

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

7. 应用渐变效果

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);  // 区域图无边框
}