乐趣区

关于qt:Qt开发技术QCharts四QChart面积图介绍Demo以及代码详解

jiezi

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

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

上一篇：《Qt 开发技术：QCharts（三）QCharts 样条曲线图介绍、Demo 以及代码详解》
下一篇：敬请期待 …

前言

  红瘦子，来也！
  依照程序，本章为面积图。

补充

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

Demo

  
  

Demo 下载地址

  以后为 v1.1.0 版本
  CSDN：https://download.csdn.net/download/qq21497936/12753524
  QQ 群：1047134658（点击“文件”搜寻“qChartsTools”，群内与博文同步更新）

面积图

概述

  面积图是应用 QAreaSeries 类或 AreaSeries QML 类型实现的。默认状况下，X 轴被用作一个边界和 QLineSeries 或线列作为另一个。然而，能够应用 QLineSeries 或 LineSeries 作为两个边界。
  

QAreaSeries（面积图类）

概述

  QAreaSeries 类在面积图中显示数据。
  面积序列用于显示定量数据。它是基于一系列线，用色彩强调边界线之间的区域。因为区域序列基于行序列，QAreaSeries 构造函数须要一个 QLineSeries 实例，该实例定义区域的上边界。默认状况下，应用绘图区域底部作为下边界绘制面积图。下边界能够由另一条线指定，而不是绘图区域的底部。在这种状况下，QAReaSeries 应该用两个 QLineSeries 实例初始化。
  留神：当下边界值大于上边界值时，术语高低边界可能会产生误导。重点是这两条边界线之间的区域将被填充。
  
  上面的代码片段阐明了如何创立根本面积图：

_pLineSeries = new QLineSeries;
_pLineSeries2 = new QLineSeries;
_pLineSeries3 = new QLineSeries;
_pLineSeries4 = new QLineSeries;
// 形式一：逐个增加，大批量数据较慢
_pLineSeries->append(0, qrand()%11);
_pLineSeries->append(1, qrand()%11);
_pLineSeries->append(2, qrand()%11);
_pLineSeries->append(3, qrand()%11);
_pLineSeries->append(4, qrand()%11);
_pLineSeries->append(5, qrand()%11);
_pLineSeries->append(6, qrand()%11);
_pLineSeries->append(7, qrand()%11);
_pLineSeries->append(8, qrand()%11);
_pLineSeries->append(9, qrand()%11);
_pLineSeries->append(10, qrand()%11);
_pLineSeries->setName("通道 1");
_pLineSeries->setPen(QPen(QColor(qrand()%256, qrand()%256, qrand()%256), 2));
// 通用：将数据插入到图表中
_pAreaSeries = new QAreaSeries();
_pAreaSeries->setName("面积 1");
_pLineSeries->setPointsVisible(true);
_pLineSeries->setPointLabelsFormat("(@xPoint,@yPoint)");
_pAreaSeries->setUpperSeries(_pLineSeries);
_pChart->addSeries(_pAreaSeries);

  效率更高的形式为：

// 形式二：逐个增加，大批量数据插入
QList<QLineSeries *> list;
list.append(_pLineSeries);
list.append(_pLineSeries2);
list.append(_pLineSeries3);
list.append(_pLineSeries4);
for(int index = 0; index < 4; index++)
{
    QList<QPointF> listPointF;
    for(int index = 0; index < 11; index++)
    {listPointF << QPointF(index, qrand()%11);
    }
    list.at(index)->append(listPointF);
    list.at(index)->setName(QString("通道 %1").arg(index+1));
    list.at(index)->setPen(QPen(QColor(qrand()%256, qrand()%256, qrand()%256), 2));
}
// 通用：将数据插入到图表中
_pAreaSeries = new QAreaSeries();
_pAreaSeries->setName("面积 1");
_pLineSeries->setPointsVisible(true);
_pLineSeries->setPointLabelsFormat("(@xPoint,@yPoint)");
_pAreaSeries->setUpperSeries(_pLineSeries);
_pChart->addSeries(_pAreaSeries);

_pAreaSeries2 = new QAreaSeries();
_pAreaSeries2->setName("面积 2");
_pAreaSeries2->setUpperSeries(_pLineSeries2);
_pChart->addSeries(_pAreaSeries2);

_pAreaSeries3 = new QAreaSeries();
_pAreaSeries3->setName("面积 3");
_pAreaSeries3->setUpperSeries(_pLineSeries3);
_pAreaSeries3->setLowerSeries(_pLineSeries2);
_pChart->addSeries(_pAreaSeries3);
_pAreaSeries4 = new QAreaSeries();
_pAreaSeries4->setName("面积 4");
_pAreaSeries4->setUpperSeries(_pLineSeries4);
_pAreaSeries4->setLowerSeries(_pLineSeries3);
_pChart->addSeries(_pAreaSeries4);

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

Demo 外围代码解析

建设 QChart 显示框架

AreaChartWidget::AreaChartWidget(QWidget *parent) :
    QWidget(parent),
    _pChartView(0),
    _pChart(0),
    _pXValueAxis(0),
    _pYValueAxis(0),
    _pLegend(0),
    _pLineSeries(0),
    _pLineSeries2(0),
    _pLineSeries3(0),
    _pLineSeries4(0),
    _pAreaSeries(0),
    _pAreaSeries2(0),
    _pAreaSeries3(0),
    _pAreaSeries4(0)
{_pChartView = new QChartView(this);
    _pChart = new QChart();
    initData();}

初始化数据

void AreaChartWidget::initData()
{
    _pLineSeries = new QLineSeries;
    _pLineSeries2 = new QLineSeries;
    _pLineSeries3 = new QLineSeries;
    _pLineSeries4 = new QLineSeries;
    // 形式一：逐个增加，大批量数据较慢
    _pLineSeries->append(0, qrand()%11);
    _pLineSeries->append(1, qrand()%11);
    _pLineSeries->append(2, qrand()%11);
    _pLineSeries->append(3, qrand()%11);
    _pLineSeries->append(4, qrand()%11);
    _pLineSeries->append(5, qrand()%11);
    _pLineSeries->append(6, qrand()%11);
    _pLineSeries->append(7, qrand()%11);
    _pLineSeries->append(8, qrand()%11);
    _pLineSeries->append(9, qrand()%11);
    _pLineSeries->append(10, qrand()%11);
    _pLineSeries->setName("通道 1");
    _pLineSeries->setPen(QPen(QColor(qrand()%256, qrand()%256, qrand()%256), 2));
    // 通用：将数据插入到图表中
    _pAreaSeries = new QAreaSeries();
    _pAreaSeries->setName("面积 1");
    _pLineSeries->setPointsVisible(true);
    _pLineSeries->setPointLabelsFormat("(@xPoint,@yPoint)");
    _pAreaSeries->setUpperSeries(_pLineSeries);
    _pChart->addSeries(_pAreaSeries);

    // 形式二：逐个增加，大批量数据插入
    QList<QLineSeries *> list;
    list.append(_pLineSeries);
    list.append(_pLineSeries2);
    list.append(_pLineSeries3);
    list.append(_pLineSeries4);
    for(int index = 1; index < 4; index++)
    {
        QList<QPointF> listPointF;
        for(int index = 0; index < 11; index++)
        {listPointF << QPointF(index, qrand()%11);
        }
        list.at(index)->append(listPointF);
        list.at(index)->setName(QString("通道 %1").arg(index+1));
        list.at(index)->setPen(QPen(QColor(qrand()%256, qrand()%256, qrand()%256), 2));
    }
    // 通用：将数据插入到图表中
    _pAreaSeries2 = new QAreaSeries();
    _pAreaSeries2->setName("面积 2");
    _pAreaSeries2->setUpperSeries(_pLineSeries2);
    _pChart->addSeries(_pAreaSeries2);

    _pAreaSeries3 = new QAreaSeries();
    _pAreaSeries3->setName("面积 3");
    _pAreaSeries3->setUpperSeries(_pLineSeries3);
    _pAreaSeries3->setLowerSeries(_pLineSeries2);
    _pChart->addSeries(_pAreaSeries3);

    _pAreaSeries4 = new QAreaSeries();
    _pAreaSeries4->setName("面积 4");
    _pAreaSeries4->setUpperSeries(_pLineSeries4);
    _pAreaSeries4->setLowerSeries(_pLineSeries3);
    _pChart->addSeries(_pAreaSeries4);


    // 通用：X 轴和 Y 轴的解决(先插入数据再解决轴, 否则不会有轴)
    _pChart->createDefaultAxes();
    _pYValueAxis = dynamic_cast<QValueAxis *>(_pChart->axisY());
//    _pYValueAxis = new QValueAxis(_pChart);
    _pYValueAxis->setRange(0, 10);
    _pYValueAxis->setLinePen(QPen(Qt::black, 1));
    // tick
    _pYValueAxis->setTickCount(5);
    _pYValueAxis->setGridLinePen(QPen(Qt::gray, 1));
    _pYValueAxis->setGridLineVisible(true);
    // subTick
    _pYValueAxis->setMinorTickCount(4);
    _pYValueAxis->setMinorGridLineVisible(true);
    _pYValueAxis->setLabelFormat("%d");
//    _pChart->addAxis(_pYValueAxis, Qt::AlignLeft);

    _pXValueAxis = dynamic_cast<QValueAxis *>(_pChart->axisX());
//    _pXValueAxis = new QValueAxis(_pChart);
    _pXValueAxis->setRange(0, 10);
    _pXValueAxis->setLinePen(QPen(Qt::black, 1));
    // tick
    _pXValueAxis->setTickCount(5);
    _pXValueAxis->setGridLinePen(QPen(Qt::gray, 1));
    _pXValueAxis->setGridLineVisible(true);
    // subTick
    _pXValueAxis->setMinorTickCount(4); // 相同
    _pXValueAxis->setMinorGridLineVisible(true);
    _pXValueAxis->setLabelFormat("%d s");
//    _pChart->addAxis(_pXValueAxis, Qt::AlignBottom);

    // 通用：视图显示设置为图表
    _pChartView->setRubberBand(QChartView::NoRubberBand);   // 不缩放
    _pChartView->setDragMode(QChartView::NoDrag);   // 拽拖：须要本人重写 QCharView
    _pChartView->setChart(_pChart);


    // 标识
    _pLegend = _pChart->legend();
    _pLegend->setAlignment(Qt::AlignRight);

    // 平滑
    _pChartView->setRenderHint(QPainter::Antialiasing, true);
    // 暗影
    _pChart->setDropShadowEnabled(true);
}

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

void AreaChartWidget::setDataVisible(int index, bool visible)
{if(index < 0 || index > 3)
    {return;}
    QList<QAreaSeries *> list;
    list.append(_pAreaSeries);
    list.append(_pAreaSeries2);
    list.append(_pAreaSeries3);
    list.append(_pAreaSeries4);
    list.at(index)->setVisible(visible);
}

设置主题款式

void AreaChartWidget::setTheme(QChart::ChartTheme theme)
{_pChart->setTheme(theme);
}

设置动画模式

void AreaChartWidget::setAnimationOptions(QChart::AnimationOption option)
{_pChart->setAnimationOptions(option);
}

设置标签显示地位

void AreaChartWidget::setAlignment(Qt::Alignment align)
{_pLegend->setAlignment(align);
}

设置标签是否可见

void AreaChartWidget::setLegendVisible(bool visible)
{_pLegend->setVisible(visible);
    _pChartView->setRenderHint(QPainter::Antialiasing);
}

设置是否绘制平滑

void AreaChartWidget::setAntialiasing(bool antialiasing)
{_pChartView->setRenderHint(QPainter::Antialiasing, antialiasing);
}

设置是否有暗影

void AreaChartWidget::setShadow(bool shadow)
{_pChart->setDropShadowEnabled(shadow);
}

是否显示数据点（新增）

void AreaChartWidget::setPointVisible(bool visible)
{_pAreaSeries->setPointsVisible(visible);
    _pAreaSeries2->setPointsVisible(visible);
    _pAreaSeries3->setPointsVisible(visible);
    _pAreaSeries4->setPointsVisible(visible);
}

是否显示数据点坐标（新增）

void AreaChartWidget::setPointLabelVisible(bool visible)
{_pAreaSeries->setPointLabelsFormat("(@xPoint,@yPoint)");
    _pAreaSeries->setPointLabelsVisible(visible);
    _pAreaSeries2->setPointLabelsFormat("(@xPoint,@yPoint)");
    _pAreaSeries2->setPointLabelsVisible(visible);
    _pAreaSeries3->setPointLabelsFormat("(@xPoint,@yPoint)");
    _pAreaSeries3->setPointLabelsVisible(visible);
    _pAreaSeries4->setPointLabelsFormat("(@xPoint,@yPoint)");
    _pAreaSeries4->setPointLabelsVisible(visible);
}

重置随机数据

void AreaChartWidget::resetData()
{_pChart->removeAllSeries();
    _pLineSeries = new QLineSeries;
    _pLineSeries2 = new QLineSeries;
    _pLineSeries3 = new QLineSeries;
    _pLineSeries4 = new QLineSeries;

    QList<QLineSeries *> list;
    list.append(_pLineSeries);
    list.append(_pLineSeries2);
    list.append(_pLineSeries3);
    list.append(_pLineSeries4);
    for(int index = 0; index < 4; index++)
    {
        QList<QPointF> listPointF;
        for(int index = 0; index < 11; index++)
        {listPointF << QPointF(index, qrand()%11);
        }
        list.at(index)->append(listPointF);
        list.at(index)->setName(QString("通道 %1").arg(index+1));
        list.at(index)->setPen(QPen(QColor(qrand()%256, qrand()%256, qrand()%256), 2));
    }

    _pAreaSeries = new QAreaSeries();
    _pAreaSeries->setName("面积 1");
    _pAreaSeries->setUpperSeries(_pLineSeries);

    _pAreaSeries2 = new QAreaSeries();
    _pAreaSeries->setName("面积 2");
    _pAreaSeries2->setUpperSeries(_pLineSeries2);
    _pChart->addSeries(_pAreaSeries2);

    _pAreaSeries3 = new QAreaSeries();
    _pAreaSeries3->setName("面积 3");
    _pAreaSeries3->setUpperSeries(_pLineSeries3);
    _pAreaSeries3->setLowerSeries(_pLineSeries2);
    _pChart->addSeries(_pAreaSeries3);

    _pAreaSeries4 = new QAreaSeries();
    _pAreaSeries4->setName("面积 4");
    _pAreaSeries4->setUpperSeries(_pLineSeries3);
    _pAreaSeries4->setLowerSeries(_pLineSeries4);
    _pChart->addSeries(_pAreaSeries4);

    _pChart->addSeries(_pAreaSeries);
    resetColor();}

初始化色彩

void AreaChartWidget::resetColor()
{
    QList<QLineSeries *> list;
    list.append(_pLineSeries);
    list.append(_pLineSeries2);
    list.append(_pLineSeries3);
    list.append(_pLineSeries4);
    for(int index = 0; index < list.size(); index++)
    {list.at(index)->setColor(QColor(qrand()%256, qrand()%256, qrand()%256));
    }
}

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

  对应版本号 v1.1.0
  减少面积图
  对折线图、曲线图和面积图减少数据点显示、数据点标签显示

上一篇：《Qt 开发技术：QCharts（三）QCharts 样条曲线图介绍、Demo 以及代码详解》
下一篇：敬请期待 …

退出移动版