若该文为原创文章，未经允许不得转载原博主博客地址：https://blog.csdn.net/qq21497936
原博主博客导航：https://blog.csdn.net/qq21497936/article/details/102478062
本文章博客地址：https://blog.csdn.net/qq21497936/article/details/108022984 各位读者，知识无穷而人力有穷，要么改需求，要么找专业人士，要么自己研究
红胖子(红模仿)的博文大全：开发技术集合（包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软硬结合等等）持续更新中…（点击传送门）

Qt开发专栏：开发技术（点击传送门）

上一篇：《Qt开发技术：QCharts（二）QCharts折线图介绍、Demo以及代码详解》下一篇：敬请期待...

前言

红胖子，来也！按照顺序，本章为样条曲线图。

补充

QCharts所有的图表都依赖《Qt开发技术：QCharts（一）QCharts基本介绍以及图表框架详解》中的QChart、QChartView、QLegend、QValueAxis。

Demo

在这里插入图片描述

Demo下载地址

CSDN：https://download.csdn.net/download/qq21497936/12685603 QQ群：1047134658（点击“文件”搜索“qChartsTools”，群内与博文同步更新）

样条曲线图

概述

折线图和样条曲线图将数据表示为一系列由直线连接的数据点。在折线图中，数据点由直线连接，而在样条曲线图中，数据点由样条曲线连接。样条曲线是使用QPainterPath绘制的。样条曲线图是通过使用继承QLineSeries的QSplineSeries类或继承LineSeries的SplineSeries类型实现的。在这里插入图片描述

QSplineSeries（样条曲线图）

概述

QSplineSeries类将数据显示为样条曲线图。样条曲线系列存储QPainterPath绘制样条曲线所需的数据点和段控制点。当数据发生变化时，自动计算控制点。该算法计算点以便绘制法向样条曲线。创建基本折线图：

1// 方式一：逐一添加，大批量数据较慢
2QSplineSeries* pSeries = new QSplineSeries();
3pSeries->append(0, 6);
4pSeries->append(2, 4);
5...
6chart->addSeries(pSeries);

效率更高的方式为：

1// 方式二：逐一添加，大批量数据插入
2_pSplineSeries = new QSplineSeries;
3_pSplineSeries2 = new QSplineSeries;
4_pSplineSeries3 = new QSplineSeries;
5_pSplineSeries4 = new QSplineSeries;
6
7QList<QSplineSeries *> listLine;
8listLine.append(_pSplineSeries);
9listLine.append(_pSplineSeries2);
10listLine.append(_pSplineSeries3);
11listLine.append(_pSplineSeries4);
12for(int index = 1; index < 4; index++)
13{
14    QList<QPointF> listPointF;
15    for(int index = 0; index < 11; index++)
16    {
17        listPointF << QPointF(index, qrand()%11);
18    }
19    listLine.at(index)->append(listPointF);
20    listLine.at(index)->setName(QString("通道%1").arg(index+1));
21    listLine.at(index)->setPen(QPen(QColor(qrand()%256, qrand()%256, qrand()%256), 2));
22    // 通用：将数据插入到图表中
23    _pChart->addSeries(listLine.at(index));
24}

注意：样条曲线图的QLineSeries类的使用请参考QXYSeries的使用。 QLineSeries类以折线图的形式显示数据。折线图用于将信息显示为由直线连接的一系列数据点。

QXYSeries（折线图、样条曲线图、散点图的基类）

概述

QXYSeries类是折线图、样条曲线图、散点图的基类，QSplineSeries、QLineSeries、QScatterSeries都参照该类使用。

属性

在这里插入图片描述

Demo核心代码解析

建立QChart的显示框架

1SplineChartWidget::SplineChartWidget(QWidget *parent) :
2    QWidget(parent),
3    _pChartView(0),
4    _pChart(0),
5    _pXValueAxis(0),
6    _pYValueAxis(0),
7    _pLegend(0),
8    _pLineSeries(0),
9    _pLineSeries2(0),
10    _pLineSeries3(0),
11    _pLineSeries4(0)
12{
13    _pChartView = new QChartView(this);
14    _pChart = new QChart();
15    initData();
16}
17void SplineChartWidget::resizeEvent(QResizeEvent *event)
18{
19    if(_pChartView)
20    {
21        _pChartView->setGeometry(rect());
22    }
23}

(本文章博客地址：https://blog.csdn.net/qq21497936/article/details/108022984)

初始化数据

1void SplineChartWidget::initData()
2{
3    _pSplineSeries = new QSplineSeries;
4    _pSplineSeries2 = new QSplineSeries;
5    _pSplineSeries3 = new QSplineSeries;
6    _pSplineSeries4 = new QSplineSeries;
7    // 方式一：逐一添加，大批量数据较慢
8    _pSplineSeries->append(0, qrand()%11);
9    _pSplineSeries->append(1, qrand()%11);
10    _pSplineSeries->append(2, qrand()%11);
11    _pSplineSeries->append(3, qrand()%11);
12    _pSplineSeries->append(4, qrand()%11);
13    _pSplineSeries->append(5, qrand()%11);
14    _pSplineSeries->append(6, qrand()%11);
15    _pSplineSeries->append(7, qrand()%11);
16    _pSplineSeries->append(8, qrand()%11);
17    _pSplineSeries->append(9, qrand()%11);
18    _pSplineSeries->append(10, qrand()%11);
19    _pSplineSeries->setName("通道1");
20    _pSplineSeries->setPen(QPen(QColor(qrand()%256, qrand()%256, qrand()%256), 2));
21    // 通用：将数据插入到图表中
22    _pChart->addSeries(_pSplineSeries);
23
24    // 方式二：逐一添加，大批量数据较慢
25    QList<QSplineSeries *> listLine;
26    listLine.append(_pSplineSeries);
27    listLine.append(_pSplineSeries2);
28    listLine.append(_pSplineSeries3);
29    listLine.append(_pSplineSeries4);
30    for(int index = 1; index < 4; index++)
31    {
32        QList<QPointF> listPointF;
33        for(int index = 0; index < 11; index++)
34        {
35            listPointF << QPointF(index, qrand()%11);
36        }
37        listLine.at(index)->append(listPointF);
38        listLine.at(index)->setName(QString("通道%1").arg(index+1));
39        listLine.at(index)->setPen(QPen(QColor(qrand()%256, qrand()%256, qrand()%256), 2));
40        // 通用：将数据插入到图表中
41        _pChart->addSeries(listLine.at(index));
42    }
43
44    // 通用：X轴和Y轴的处理(先插入数据再处理轴,否则不会有轴)
45    _pChart->createDefaultAxes();
46    _pYValueAxis = dynamic_cast<QValueAxis *>(_pChart->axisY());
47//    _pYValueAxis = new QValueAxis(_pChart);
48    _pYValueAxis->setRange(0, 10);
49    _pYValueAxis->setLinePen(QPen(Qt::black, 1));
50    // tick
51    _pYValueAxis->setTickCount(5);
52    _pYValueAxis->setGridLinePen(QPen(Qt::gray, 1));
53    _pYValueAxis->setGridLineVisible(true);
54    // subTick
55    _pYValueAxis->setMinorTickCount(4);
56    _pYValueAxis->setMinorGridLineVisible(true);
57    _pYValueAxis->setLabelFormat("%d");
58//    _pChart->addAxis(_pYValueAxis, Qt::AlignLeft);
59
60    _pXValueAxis = dynamic_cast<QValueAxis *>(_pChart->axisX());
61//    _pXValueAxis = new QValueAxis(_pChart);
62    _pXValueAxis->setRange(0, 10);
63    _pXValueAxis->setLinePen(QPen(Qt::black, 1));
64    // tick
65    _pXValueAxis->setTickCount(5);
66    _pXValueAxis->setGridLinePen(QPen(Qt::gray, 1));
67    _pXValueAxis->setGridLineVisible(true);
68    // subTick
69    _pXValueAxis->setMinorTickCount(4); // 相反
70    _pXValueAxis->setMinorGridLineVisible(true);
71    _pXValueAxis->setLabelFormat("%d s");
72//    _pChart->addAxis(_pXValueAxis, Qt::AlignBottom);
73
74    // 通用：视图显示设置为图表
75    _pChartView->setRubberBand(QChartView::NoRubberBand);   // 不缩放
76    _pChartView->setDragMode(QChartView::NoDrag);   // 拽拖：需要自己重写QCharView
77    _pChartView->setChart(_pChart);
78
79
80    // 标识
81    _pLegend = _pChart->legend();
82    _pLegend->setAlignment(Qt::AlignRight);
83
84    // 平滑
85    _pChartView->setRenderHint(QPainter::Antialiasing, true);
86    // 阴影
87    _pChart->setDropShadowEnabled(true);
88
89}

设置数据线是否显示（标签显示会同步）

1void SplineChartWidget::setDataVisible(int index, bool visible)
2{
3    if(index < 0 || index > 3)
4    {
5        return;
6    }
7    QList<QSplineSeries *> listLine;
8    listLine.append(_pSplineSeries);
9    listLine.append(_pSplineSeries2);
10    listLine.append(_pSplineSeries3);
11    listLine.append(_pSplineSeries4);
12    listLine.at(index)->setVisible(visible);
13}

设置主题样式

1void SplineChartWidget::setTheme(QChart::ChartTheme theme)
2{
3    _pChart->setTheme(theme);
4}

设置动画模式

1void SplineChartWidget::setAnimationOptions(QChart::AnimationOption option)
2{
3    _pChart->setAnimationOptions(option);
4}

设置标签显示位置

1void SplineChartWidget::setAlignment(Qt::Alignment align)
2{
3    _pLegend->setAlignment(align);
4}

设置标签是否可见

1void SplineChartWidget::setLegendVisible(bool visible)
2{
3    _pLegend->setVisible(visible);
4    _pChartView->setRenderHint(QPainter::Antialiasing);
5}

设置是否绘制平滑

1void SplineChartWidget::setAntialiasing(bool antialiasing)
2{
3    _pChartView->setRenderHint(QPainter::Antialiasing, antialiasing);
4}

设置是否有阴影

1void SplineChartWidget::setShadow(bool shadow)
2{
3    _pChart->setDropShadowEnabled(shadow);
4}

重置随机数据

1void SplineChartWidget::resetData()
2{
3    _pChart->removeAllSeries();
4    _pSplineSeries = new QSplineSeries;
5    _pSplineSeries2 = new QSplineSeries;
6    _pSplineSeries3 = new QSplineSeries;
7    _pSplineSeries4 = new QSplineSeries;
8    QList<QSplineSeries *> listLine;
9    listLine.append(_pSplineSeries);
10    listLine.append(_pSplineSeries2);
11    listLine.append(_pSplineSeries3);
12    listLine.append(_pSplineSeries4);
13    for(int index = 0; index < 4; index++)
14    {
15        QList<QPointF> listPointF;
16        for(int index = 0; index < 11; index++)
17        {
18            listPointF << QPointF(index, qrand()%11);
19        }
20        listLine.at(index)->append(listPointF);
21        listLine.at(index)->setName(QString("通道%1").arg(index+1));
22        listLine.at(index)->setPen(QPen(QColor(qrand()%256, qrand()%256, qrand()%256), 2));
23        _pChart->addSeries(listLine.at(index));
24    }
25    resetColor();
26}

重置随机颜色

1void SplineChartWidget::resetColor()
2{
3    QList<QLineSeries *> listLine;
4    listLine.append(_pSplineSeries);
5    listLine.append(_pSplineSeries2);
6    listLine.append(_pSplineSeries3);
7    listLine.append(_pSplineSeries4);
8    for(int index = 0; index < listLine.size(); index++)
9    {
10        listLine.at(index)->setColor(QColor(qrand()%256, qrand()%256, qrand()%256));
11    }
12}

工程模板：对应版本号v1.0.0

对应版本号v1.0.0