[QT] QT中的折线图和散点图

前言：QT中如何创建一个图标既包含散点图又包含折线图

步骤

Qt Charts 把图表绘制拆分成 "数据→容器→展示→窗口

类名	说明
QScatterSeries/QLineSeries	只负责存储图表的数据（比如散点的坐标、折线的点），不负责任何显示逻辑数据和展示分离，你可以单独修改数据（比如新增 / 删除点），不用动图表样式
QChart	管理所有图表元素收纳 1 个或多个 Series（比如同时放散点 + 折线）；管理坐标轴、标题、图例；统筹数据的 "布局规则"（比如坐标轴范围）作为图表的 "核心容器"，把数据、坐标轴、标题等整合在一起，相当于给所有元素定好位置
QChartView	把 QChart 渲染到屏幕上；提供抗锯齿、缩放、平移等交互能力；承接 Qt 常规的绘图优化（比如 setRenderHint）
QMainWindow/QWidget	提供一个 "窗口载体"

bash 复制代码

1. 创建 QScatterSeries对象 并添加散点图的坐标点
2. 自定义散点样式
3. 创建QLineSeries对象 并添加折线图的坐标点
4. 创建 QChart 并添加散点系列 //或者可以使用ChartView中的自带的
5. 创建 ChartView 并把QChart 绑定到ChartView 上，显示图表
6. 创建坐标轴 并添加到图表
7. 显示窗口

cpp 复制代码

#include "VQScatterSeries.h"
#include <QVBoxLayout>
#include <QValueAxis>
#include <QLineSeries>

VQScatterSeries::VQScatterSeries(QWidget *parent) : QWidget(parent)
{
    QList<QPointF> scatterPoints = {
        QPointF(0.0, 2.5),
        QPointF(1.0, 4.2),
        QPointF(2.0, 3.8),
        QPointF(3.0, 6.1),
        QPointF(4.0, 5.9),
        QPointF(5.0, 8.3),
        QPointF(6.0, 7.7),
        QPointF(7.0, 9.2),
        QPointF(8.0, 8.8),
        QPointF(9.0, 10.5)
    };
    QScatterSeries *Series = new QScatterSeries();
    Series->append(scatterPoints);

    //2.定义散点样式
    Series->setName("散点"); //图例名称
    Series->setMarkerSize(12);//散点大小
    Series->setColor(Qt::darkCyan);//散点颜色

    //3.创建折线图
     QLineSeries *lineSeries = new QLineSeries();
     lineSeries->append(0,1);
     lineSeries->append(10,12);
     lineSeries->setColor(Qt::red); // 折线设为红色
     lineSeries->setName("折线");
#if 1
    //4.创建 QChart 并添加散点系列
    QChart* chart = new QChart();
#else
   //4.使用chartView自带的QChart
   QChart *chart = chartView->chart();
#endif
    chart->addSeries(Series);
    chart->addSeries(lineSeries);

    chart->setTitle("QScatterSeries");
    chart->setTheme(QChart::ChartThemeBlueNcs);//设置主题

    // 5.创建坐标轴
    QValueAxis *axisX = new QValueAxis;
    QValueAxis *axisY = new QValueAxis;
    axisX->setRange(0, 10);
    axisY->setRange(0, 12);
    //将坐标轴添加到图表，并指定显示位置
    chart->addAxis(axisX, Qt::AlignBottom);
    chart->addAxis(axisY,Qt::AlignLeft);

    //让散点基于该坐标轴显示
    Series->attachAxis(axisX);
    Series->attachAxis(axisY);

    //折线图基于该坐标轴显示
    lineSeries->attachAxis(axisX);
    lineSeries->attachAxis(axisY);

     //5.创建 ChartView 并把chart绑定ChartView中到显示图表
    QChartView *chartView = new QChartView(chart);
    chartView->setRenderHint(QPainter::Antialiasing);
    chartView->setRubberBand(QChartView::RectangleRubberBand);

    QVBoxLayout *layout = new QVBoxLayout(this);
    layout->addWidget(chartView);
    layout->setContentsMargins(20, 20, 20, 20);
    this->setLayout(layout);
}

效果展示