qcustomplot使用教程--基本绘图

最新推荐文章于 2024-09-16 14:13:50 发布

舞裆派掌门

最新推荐文章于 2024-09-16 14:13:50 发布

阅读量7.7k

点赞数 8

文章标签： ui qt 开发语言

本文链接：https://blog.csdn.net/wanglu22006281/article/details/129953660

版权

0、说明

本节翻译总结自：Qt Plotting Widget QCustomPlot - Basic Plotting

本节内容是使用QCustomPlot进行基本绘图。

本节教程都使用customPlot这个变量，它是一个指向QCustomPlot实例的指针，当然，在我们的项目中，我们更可能是通过ui->customPlot来访问这些QCustomPlot实例。

1、基本用法

1.1、创建新画布

customPlot -> addGraph();

每个Graph及其上的线构成一幅图。

1.2、给画布分配数据点

customPlot->graph(0)->setData(x,y)

x、y是大小相等的一组数据，其中x中存储的是横坐标，y中存储的是纵坐标。

1.3、轴

假设我们有两个QVector<double>，分别存放了一组点的x和y坐标（Key与Value）。不过QCustomPlot更倾向于使用Key与Value而非x与y，这样可以更灵活地区分哪个轴具有什么样的功能。所以当我们定义左边轴为Key轴而底部轴为Value轴时，我们就可以沿着左边的轴绘制一幅直立的图。

QCustomPlot有4个轴customPlot->xAxis, yAxis, xAxis2, 和 yAxis2，它们都是QCPAxis类型的，分别对应下、左、上、右。

如果要设置轴的范围为(-1,1)，可以用：

customPlot->xAxis->setRange(-1,1);

1.4、重绘

如果对画布做了任何修改，可以用

customPlot->replot();

进行重绘。

不过每当Widget被拉伸或者触发了内置用户交互时，都会自动进行重绘；这里的交互是指通过鼠标拖动坐标轴的范围、用鼠标滚轮缩放等。

1.5、例子

绘制一个y=x2的曲线：

QVector<double> x(101),y(101);
    for(int i=0;i<101;i++){
        x[i]=i/50.0-1;//设置x的范围为-1~1
        y[i]=x[i]*x[i];
    }
    //创建画布,设置画布上的点数据
    ui->customPlot->addGraph();
    ui->customPlot->graph(0)->setData(x,y);
    //设置坐标轴标签
    ui->customPlot->xAxis->setLabel("x");
    ui->customPlot->yAxis->setLabel("y");
    //设置坐标轴范围，以便我们可以看到全部数据
    ui->customPlot->xAxis->setRange(-1,1);
    ui->customPlot->yAxis->setRange(0,1);
    ui->customPlot->replot();

坐标轴刻度、间隔和显示的数字是由axis ticker决定的，它是QCPAxisTicker类型的变量，通过xAxis->ticker()访问。

可以通过xAxis->ticker()->setTickCount(6)来调整坐标轴上显示的刻度数值的个数。默认情况下，这个个数是自适应的最少的个数。不过，也有一些特殊的情况，比如坐标轴是时间、日期、分类、对数坐标系的情况。具体可以看QCPAxisTicker。

2、改变样式

2.1、画布

2.1.1、线的样式

graph ->setLineStyle(..)

有哪些线的样式，可以看QCPGraph ::LineStyle。

2.1.2、画笔

graph->setPen(..)

2.1.3、点的样式

graph ->setScatterStyle(..)

有哪些点的样式，可以看QCPScatterStyle

2.1.4、填充色

graph->setBrush(..)：填充该线和0刻度线围成的区域。

graph ->setChannelFillGraph(otherGraph)：填充两条线之间的区域；如果要移除线间填充，只需要把参数设置为0即可，这时填充的区域为该线与0刻度线围成的区域。

如果要完全移除区域填充，用graph->setBrush(Qt::NoBrush)

2.2、坐标轴

坐标轴多是通过改变画笔和字体进行修改的。可以看QCPAxis。

这里给出一些比较重要的特性：

setBasePen, setTickPen, setTickLength, setSubTickLength, setSubTickPen, setTickLabelFont, setLabelFont, setTickLabelPadding, setLabelPadding.

我们可以用setRangeReversed来颠倒一个坐标轴（例如按照从高到低的顺序绘制）。

如果想修饰坐标轴的尾部（例如添加箭头），可以用setLowerEnding或setUpperEnding。

2.3、网格线

网格线是QCPGrid对象。

网格线是和坐标轴绑定的，水平网格线是与左坐标轴绑定的，通过customPlot ->yAxis ->grid()访问。网格线的外观由绘制它的画笔决定，通过yAxis ->grid()->setPen()进行设置。

位于0刻度处的网格线可以用不同的画笔绘制，该画笔样式通过setZeroLinePen进行配置。如果我们不想用特殊的画笔绘制零刻度线，只需要把它设置为Qt::NoPen即可，这样0刻度线就和普通刻度线的绘制方法一样了。

子网格线默认是隐藏的，可以用grid()->setSubGridVisible(true)激活。

2.4、例1：两幅图叠加绘制

下边的代码是绘制一幅衰减的余弦曲线和它的指数包裹曲线，每条曲线即是一条Graph

//添加两幅图并填充内容
    //第一幅图
    ui->customPlot->addGraph();
    //线的颜色
    ui->customPlot->graph(0)->setPen(QPen(Qt::blue));
    //用半透明的蓝色填充
    ui->customPlot->graph(0)->setBrush(QBrush(QColor(0,0,255,20)));

    //第二幅图
    ui->customPlot->addGraph();
    ui->customPlot->graph(1)->setPen(QPen(Qt::red));

    //生成数据点
    QVector<double> x(251),y0(251),y1(251);
    for(int i=0;i<251;i++){
        x[i]=i;
        y0[i]=qExp(-i/150.0)*qCos(i/10.0);//指数衰减的余弦曲线
        y1[i]=qExp(-i/150.0);//指数包裹曲线
    }
    //配置上和右坐标轴来显式刻度,但是不显示数字
    ui->customPlot->xAxis2->setVisible(true);
    ui->customPlot->xAxis2->setTickLabels(false);
    ui->customPlot->yAxis2->setVisible(true);
    ui->customPlot->yAxis->setTickLabels(false);

    //修改左和底坐标轴,使之与右和上坐标轴始终匹配
    connect(ui->customPlot->xAxis, SIGNAL(rangeChanged(QCPRange)), ui->customPlot->xAxis2, SLOT(setRange(QCPRange)));
    connect(ui->customPlot->yAxis, SIGNAL(rangeChanged(QCPRange)), ui->customPlot->yAxis2, SLOT(setRange(QCPRange)));

    //为每幅图设置点
    ui->customPlot->graph(0)->setData(x,y0);
    ui->customPlot->graph(1)->setData(x,y1);

    //使图0自适应范围
    ui->customPlot->graph(0)->rescaleAxes();
    //图1页一样,但是只允许放大,以免比图0小
    ui->customPlot->graph(1)->rescaleAxes(true);
    //注意,以上两步也可以用ui->customPlot->rescaleAxes();来代替

    //允许用户用鼠标拖拉、缩放、选择任一幅图
    ui->customPlot->setInteractions(QCP::iRangeDrag | QCP::iRangeZoom | QCP::iSelectPlottables);

结果：

正如上文所写，为Graph进行色彩填充，只需要用setBrush()就可以实现。

2.5、例2：多轴、多样式绘图

接下来，我们来看一个更复杂的例子，这个例子中包含了4个坐标轴上的4个Graph，纹理填充，垂直误差、图例、分割点等内容

QCustomPlot * cp = ui->customPlot;
    QCustomPlot * customPlot = cp;
    //设置区域,点号作为小数分隔符、逗号作为千位分隔符
    cp->setLocale(QLocale(QLocale::English,QLocale::UnitedKingdom));
    cp->legend->setVisible(true);
    //用MainWindow字体,减小字体大小
    QFont legendFont=font();
    legendFont.setPointSize(9);
    cp->legend->setFont(legendFont);
    cp->legend->setBrush(QBrush(QColor(255,255,255,230)));
    //默认情况下,图例是嵌入主框架之中,接下来演示如何修改它的布局
    cp->axisRect()->insetLayout()->setInsetAlignment(0,Qt::AlignBottom | Qt::AlignRight);

    //配置第一幅图,Key轴是左,Value轴是底
    cp->addGraph(cp->yAxis,cp->xAxis);
    cp->graph(0)->setPen(QPen(QColor(255,100,0)));
    cp->graph(0)->setBrush(QBrush(QPixmap("./balboa.jpg")));
    cp->graph(0)->setLineStyle(QCPGraph::lsLine);
    cp->graph(0)->setScatterStyle(QCPScatterStyle(QCPScatterStyle::ssDisc,5));
    cp->graph(0)->setName("Left maxwell function");

    //配置第二幅图,Key是底,Value是左
    customPlot->addGraph();
    customPlot->graph(1)->setPen(QPen(Qt::red));
    customPlot->graph(1)->setBrush(QBrush(QPixmap("./balboa.jpg"))); // same fill as we used for graph 0
    customPlot->graph(1)->setLineStyle(QCPGraph::lsStepCenter);
    customPlot->graph(1)->setScatterStyle(QCPScatterStyle(QCPScatterStyle::ssCircle, Qt::red, Qt::white, 7));
    customPlot->graph(1)->setName("Bottom maxwell function");
    QCPErrorBars * errorBars = new QCPErrorBars(customPlot->xAxis,customPlot->yAxis);
    errorBars->removeFromLegend();
    errorBars->setDataPlottable(cp->graph(1));

    //配置第三幅图,Key是顶,Value是右
    customPlot->addGraph(customPlot->xAxis2, customPlot->yAxis2);
    customPlot->graph(2)->setPen(QPen(Qt::blue));
    customPlot->graph(2)->setName("High frequency sine");
    //配置第四幅图,轴与第三幅图相同
    customPlot->addGraph(customPlot->xAxis2, customPlot->yAxis2);
    QPen blueDotPen;
    blueDotPen.setColor(QColor(30, 40, 255, 150));
    blueDotPen.setStyle(Qt::DotLine);
    blueDotPen.setWidthF(4);
    customPlot->graph(3)->setPen(blueDotPen);
    customPlot->graph(3)->setName("Sine envelope");
    //配置第五幅图,右为Key轴,顶为Value轴
    //第五幅图中包含一些随机扰动的点
    customPlot->addGraph(customPlot->yAxis2, customPlot->xAxis2);
    customPlot->graph(4)->setPen(QColor(50, 50, 50, 255));
    customPlot->graph(4)->setLineStyle(QCPGraph::lsNone);
    customPlot->graph(4)->setScatterStyle(QCPScatterStyle(QCPScatterStyle::ssCircle, 4));
    customPlot->graph(4)->setName("Some random data around\na quadratic function");

    //生成数据
    QVector<double> x0(25), y0(25);
    QVector<double> x1(15), y1(15), y1err(15);
    QVector<double> x2(250), y2(250);
    QVector<double> x3(250), y3(250);
    QVector<double> x4(250), y4(250);
    for (int i=0; i<25; ++i) // data for graph 0
    {
      x0[i] = 3*i/25.0;
      y0[i] = qExp(-x0[i]*x0[i]*0.8)*(x0[i]*x0[i]+x0[i]);
    }
    for (int i=0; i<15; ++i) // data for graph 1
    {
      x1[i] = 3*i/15.0;;
      y1[i] = qExp(-x1[i]*x1[i])*(x1[i]*x1[i])*2.6;
      y1err[i] = y1[i]*0.25;
    }
    for (int i=0; i<250; ++i) // data for graphs 2, 3 and 4
    {
      x2[i] = i/250.0*3*M_PI;
      x3[i] = x2[i];
      x4[i] = i/250.0*100-50;
      y2[i] = qSin(x2[i]*12)*qCos(x2[i])*10;
      y3[i] = qCos(x3[i])*10;
      y4[i] = 0.01*x4[i]*x4[i] + 1.5*(rand()/(double)RAND_MAX-0.5) + 1.5*M_PI;
    }

    //为每幅图设置数据
    customPlot->graph(0)->setData(x0, y0);
    customPlot->graph(1)->setData(x1, y1);
    errorBars->setData(y1err);
    customPlot->graph(2)->setData(x2, y2);
    customPlot->graph(3)->setData(x3, y3);
    customPlot->graph(4)->setData(x4, y4);
    //激活顶和右坐标轴
    customPlot->xAxis2->setVisible(true);
    customPlot->yAxis2->setVisible(true);
    //设置显示数据的合适的范围
    customPlot->xAxis->setRange(0, 2.7);
    customPlot->yAxis->setRange(0, 2.6);
    customPlot->xAxis2->setRange(0, 3.0*M_PI);
    customPlot->yAxis2->setRange(-70, 35);
    //为顶轴设置刻度为pi相关刻度
    customPlot->xAxis2->setTicker(QSharedPointer<QCPAxisTickerPi>(new QCPAxisTickerPi));
    //添加标题布局
    customPlot->plotLayout()->insertRow(0);
    customPlot->plotLayout()->addElement(0, 0, new QCPTextElement(customPlot, "Way too many graphs in one plot", QFont("sans", 12, QFont::Bold)));
    //设置各个轴的标签
    customPlot->xAxis->setLabel("Bottom axis with outward ticks");
    customPlot->yAxis->setLabel("Left axis label");
    customPlot->xAxis2->setLabel("Top axis label");
    customPlot->yAxis2->setLabel("Right axis label");
    //使底轴刻度向外延伸
    customPlot->xAxis->setTickLength(0, 5);
    customPlot->xAxis->setSubTickLength(0, 3);
    //使右轴刻度向内和向外延伸
    customPlot->yAxis2->setTickLength(3, 3);
    customPlot->yAxis2->setSubTickLength(1, 1);

结果：

正如结果所示，我们可以自由定义哪个轴占主导地位。

为了展示图2的误差线，我们构造了QCPErrorBars实例用以绘制其他Graph的误差线。

2.6、例3：绘制日期、时间数据

本例介绍如何绘制时间、日期相关的数。要实现这一目的，需要在每个轴上使用QCPAxisTickerDateTime作为轴刻度。

QCustomPlot * cp = ui->customPlot;
    QCustomPlot * customPlot = ui->customPlot;

    cp->setLocale(QLocale(QLocale::English,QLocale::UnitedKingdom));
    //当前时间戳,用它作为起始点
    double now = QDateTime::currentDateTime().toSecsSinceEpoch();
    //设置随机数种子
    srand(8);
    //生成多幅graph
    for(int gi=0;gi<5;gi++){
        cp->addGraph();
        QColor color(20+200/4.0*gi,70*(1.6-gi/4.0),150,150);
        cp->graph()->setLineStyle(QCPGraph::lsLine);
        cp->graph()->setPen(QPen(color.lighter(200)));
        cp->graph()->setBrush(QBrush(color));
        //产生随机数据
        QVector<QCPGraphData> timeData(250);
        for (int i=0;i<250;i++){
            timeData[i].key=now+24*3600*i;
            if(i==0)
                timeData[i].value =(i/50.0+1)*(rand()/(double)RAND_MAX-0.5);
            else
                timeData[i].value=qFabs(timeData[i-1].value)*(1+0.02/4.0*(4-gi))+(i/50.0+1)*(rand()/(double)RAND_MAX-0.5);
            cp->graph()->data()->set(timeData);

        }
        //配置底轴以显示日期而非数字
        QSharedPointer<QCPAxisTickerDateTime>dateTicker(new QCPAxisTickerDateTime);
        dateTicker->setDateTimeFormat("d._MMMM\nyyyy");
        cp->xAxis->setTicker(dateTicker);
        //配置左轴
        QSharedPointer<QCPAxisTickerText> textTicker(new QCPAxisTickerText);
        textTicker->addTick(10,"a bit\nlow");
        textTicker->addTick(50,"quite/nhigh");
        cp->yAxis->setTicker(textTicker);
        //为左轴和底轴的刻度设置合适的字体
        cp->xAxis->setTickLabelFont(QFont(QFont().family(),8));
        cp->yAxis->setTickLabelFont(QFont(QFont().family(),8));
        //设置轴标签
        cp->xAxis->setLabel("Date");
        cp->yAxis->setLabel("Random wobbly lines value");
        //使顶轴和右轴可见,但是并不显示刻度值和标签
        customPlot->xAxis2->setVisible(true);
        customPlot->yAxis2->setVisible(true);
        customPlot->xAxis2->setTicks(false);
        customPlot->yAxis2->setTicks(false);
        customPlot->xAxis2->setTickLabels(false);
        customPlot->yAxis2->setTickLabels(false);
        //设置轴范围以显示所有数据
        cp->xAxis->setRange(now,now+24*3600*249);
        cp->yAxis->setRange(0,60);
        //显示图例,图例背景轻微透明
        cp->legend->setVisible(true);
        cp->legend->setBrush(QColor(255,255,255,150));

结果：

我们传入dateTicker->setDateTimeFormat()中的字符串，需要符合ISO8601时间格式，除了时间格式之外的其他字符都会原封不动的保留，而时间格式的字符会被正确填充。

需要注意的是，QCustomPlot处理的时间/日期坐标系，都是以时间戳0起始坐标点的，，单位是s。所以当我们构造时，也要以时间戳为横坐标，只是在显示的时候通过时间/日期占位符转化为指定的时间/日期。

如果精度是比秒更小的单元，那么可以用浮点数。我们可以用QCPAxisTickerDateTime ::dateTimeToKey和keyToDateTime用于浮点Unix Time和QDateTime间的转换。

而对于QDateTime::toMSecsSinceEpoch，则是以毫秒为单位，也可以使用这种方式构建更微小的时间精度。

3、图形之外：曲线、图标、统计图

目前为止，我们只应用了Graph，因为Graph是我们使用QCustomPlot的主要内容，QCustomPlot为我们使用Graph提供了专门的接口，我们也一直在使用它们，比如QCustomPlot ::addGraph、QCustomPlot ::graph等等。但是这些并不是全部。

QCustomPlot也有许多更通用的绘图接口，称为Plottable，这个接口是围绕抽象类QCPAbstractPlottable构建的。所有的Plottables都是从这个类继承而来，当然也包括了最熟悉的QCPGraph类。现在介绍一些QCustomPlot提供的Plottable类：

QCPGraph：这是我们本节经常用的一个Plottable类。用于点、线、填充的方式展示一系列的数据；
QCPCurve：与QCPgraph类似，不同之处在于它用于展示参数曲线。不同于函数Graph，使用这个类时可能有循环；
QCPBars：柱状图；
QCPStatisticalBox:：箱型图；
QCPColorMap：通过使用颜色梯度将第三个维度可视化的2D图；
QCPFinancial: 用于可视化股价的Plottable；
QCPErrorBars: 一个特殊的Plottable，附加在另一个Plottable上用于显示数据点的误差情况。

不同于Graph，其他的Plottable需要用new进行构造，而不是用addCurve、addBars等函数创建。已经存在的Plottable可以通过QCustomPlot ::plottable(int index)访问，plottable的数量可以用QCustomPlot ::plottableCount访问。

下文是构造柱状图的例子：

QCPBars *myBars = new QCPBars(customPlot->xAxis, customPlot->yAxis);
// now we can modify properties of myBars:
myBars->setName("Bars Series 1");
QVector<double> keyData;
QVector<double> valueData;
keyData << 1 << 2 << 3;
valueData << 2 << 4 << 8;
myBars->setData(keyData, valueData);
customPlot->rescaleAxes();
customPlot->replot();