QCustomPlot详解第一章：绘制简单曲线 |
您所在的位置：网站首页 › QCustomPlot图例置顶 › QCustomPlot详解第一章：绘制简单曲线 |
QCustomPlot详解第一章：绘制简单曲线
|
QCustomPlot曲线绘制和管理（第一章）
一、曲线的元素、属性和操作总结1.1 曲线元素1.2 曲线属性1.3 曲线操作1.4 曲线算法
二、QCustomPlot框架梳理三、QCustomPlot详解3.1 QCustomPlot下载和调用3.1.1 QCustomPlot官网下载3.1.2 QCustomPlot调用
3.2 QCustomPlot画曲线3.3 设置曲线元素和修饰3.3.1 设置曲线显示范围3.3.2 设置坐标轴名称3.3.3 设置曲线标题
本教程共分三章，按照认知过程，以简单直白的语言详解曲线的绘制和管理。 1）第一章（本章）从曲线的构成、属性和操作入手，先让读者对曲线有个整体的直观认识，接着介绍QCustomPlot的下载、调用，再逐步添加元素，最后呈现一个简单且基本完整的曲线，并给出完整的代码。 2）第二章详解图例、网格、坐标等元素和相关属性设置。 3）第三章讲解对曲线的放大、缩小、平移、修改元素属性等操作。 一、曲线的元素、属性和操作总结在构建曲线图之前，我们先理一理曲线包括哪些元素和功能，然后再看如何用代码实现。打开Excel表，我们画一个曲线，如下图所示：
对于曲线的组成元素，可以做个简单总结。曲线元素主要包括： 1）曲线标题 2）坐标轴标题 3）坐标轴刻度 4）坐标点集合，即（x，y），构成曲线 5）图例 6）网格 1.2 曲线属性对于曲线的元素，我们又可以赋予一定的属性，主要包括： 1）文字颜色和大小 2）曲线颜色和粗细 1.3 曲线操作我们除了观看曲线，还需要对曲线做一些常规操作，主要包括： 1）坐标轴范围设置，可以用代码实现自适应坐标范围功能 2）曲线放大与缩小，如正向（左上角画到右下角）画矩形进行放大，反向（右下角画到左上角）画矩形恢复满刻度 3）修改曲线颜色和粗细 4）显示或隐藏单条或多条曲线 5）显示或隐藏网格，设置网格风格 1.4 曲线算法曲线本身常有自己的特征，为了找出这些特征或进行优化处理，会涉及到一些算法操作。常用的算法可以包括： 1）寻峰 2）去噪 3）微分/求导 4）消锯齿 5）归一化 二、QCustomPlot框架梳理前文我们总结了曲线的基本元素、属性和操作，接下来就使用QCustomPlot去实现他们。学习一个类之前，我们也根据对表格的认知过程，再梳理一下要学习哪些内容。 如何获取QCustomPlot，如何调用，显示一条简单的曲线。 1）下载、安装和调用 2）最基本的曲线显示 如何设置QCustomPlot的元素和属性。 1）坐标轴、网格 2）文字大小和颜色 3）曲线粗细 如何对QCustomPlot曲线进行操作。 1）元素的显示和隐藏 2）放大、缩小和平移 3）自适应坐标范围 如何对曲线进行算法处理。 1）平滑、拟合、插值、消除锯齿 2）微分、寻峰 3）归一化、误差分析 本节和前文表曲线总结有些重复，之所以列出来，就是为了再次明确我们要用QCustomPlot干什么，梳理曲线认知。 许多教程上来就直接讲解QCustomPlot，把官方例程贴出来一顿解说，这样很容易忽略掉我们自身对曲线的认知，把原本服务于我们表达和操作曲线的QCustomPlot，硬生生的变成了我们要去学习和适应它了。学习过程中，我们必须把握好一条主线，就是我们对曲线本身有很好的认知，只需要研究QCustomPlot如何帮我们实现。 三、QCustomPlot详解 3.1 QCustomPlot下载和调用 3.1.1 QCustomPlot官网下载官网下载地址：https://www.qcustomplot.com/index.php/download 不用纠结具体哪个版本，根据提示选择自己Qt版本对应的就可以。推荐下载完整包，包括源码、文档和例程。 接下来我们按照官网引导教程来调出一个带坐标的QCustomplot界面，如下图
本节按照官网引导教程说明如何调用QCustomPlot。 英文好的朋友可以直接到官网阅读：https://www.qcustomplot.com/index.php/tutorials/settingup 下载的QCustomPlot压缩包解压后，把qcustomplot.h和qcustomplot.cpp文件拷贝到工程文件夹，在左侧工程名称上右键点击弹出对话框，选择“添加现有文件”，选中qcustomplot.h和qcustomplot.cpp文件，添加到工程目录，如下图：
至此，我们已经完成了对QCustomPlot的调用。接下来就可以在QCustomPlot控件进行绘图操作了~ 3.2 QCustomPlot画曲线英文好的朋友可以参照官网画曲线教程：https://www.qcustomplot.com/index.php/tutorials/basicplotting 我们先把拖拽并提升为QCustomPlot的widget控件改名为customplot，以示区分。 我们添加的QCustomPlot控件，是一个画布，我们可以在同一个画布上画很多曲线。那么首先我们需要添加曲线，函数是 customPlot->addGraph();设置曲线的具体数据的函数是 void QCPGraph::setData(const QVector &keys, const QVector &values, bool alreadySorted)这里的keys是x坐标，values是y坐标，均为QVector类型。因此我们需要先用QVector赋值一对点集，作为x和y坐标。代码如下： // generate some data: 一个二次函数 y = x^2 QVector x(101), y(101); // initialize with entries 0..100 for (int i=0; i x[i] = i; // x goes from 1 to 100 y[i] = x[i]*x[i]; // let's plot a quadratic function } ui->customplot->addGraph(); ui->customplot->graph(0)->setData(x,y); ui->customplot->replot(); //按钮执行时需要添加刷新函数把完成代码放在MainWindow初始化函数或某个控件点击函数，执行动作后可显示如下曲线：
当然，这个曲线的很单调，还是个折线图，显示也不完全，还需要做很多修饰。按照感觉舒适度，有几个点是要做的，主要有： 坐标范围要显示全，比如代码设置的x轴(-50,50)范围坐标轴的名称，至少有个x和y轴名称，最好加个单位不要显示折线，当然也和x轴没显示全有关有个标题 3.3 设置曲线元素和修饰我们先按照上面列举的舒适度顺序来优化先曲线 3.3.1 设置曲线显示范围我们可以手动设置坐标轴范围，也可以自动设置。 根据x轴范围(-50,50)，则y轴范围是(1,2500)，我们先手动设置下： ui->customplot->xAxis->setRange(1,100); ui->customplot->yAxis->setRange(1,2500);自动设置，即自适应坐标范围代码如下： ui->customplot->rescaleAxes(true);两种方式得到相同的曲线，如下图：
我们给坐标轴加个名称和单位，代码如下： ui->customplot->xAxis->setLabel("电压（V）"); ui->customplot->yAxis->setLabel("电流（A）"); 3.3.3 设置曲线标题我们再给曲线加个标题，代码如下： QCPTextElement *plotTitle = new QCPTextElement(ui->customplot); plotTitle->setText("伏安曲线"); plotTitle->setFont(QFont("宋体", 16, QFont::Bold)); ui->customplot->plotLayout()->insertRow(0); ui->customplot->plotLayout()->addElement(0, 0, plotTitle);这里涉及到QCustomPlot的布局系统，用于管理标题、图例、网格、坐标轴矩形等元素，可参见其他博主译文：QCustomPlot之布局系统 在设置坐标轴名称和添加标题后，曲线显示如下：
到这里，一个基本完整的曲线就完成了，我们再把代码总结下： // generate some data: 一个二次函数 y = x^2 QVector x(101), y(101); // initialize with entries 0..100 for (int i=0; i |
【本文地址】
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |