QCustomPlot 线样式,点样式

本文介绍如何使用QCustomPlot库进行自定义绘图配置,包括设置线宽、样式、颜色,填充色,数据点连接方式及散点图样式等。通过实际代码演示如何创建不同风格的图表。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、线宽、样式、颜色


通过画笔QPen设置线的线宽、样式和颜色,线样式Qt::PenStyle有几个枚举值,实线虚线等。

代码例子:

QPen pen;
pen.setWidth(3);//线宽
// 添加Graph,1条曲线使用一个Graph
customPlot->addGraph();
pen.setStyle(Qt::PenStyle::DashLine);//虚线
pen.setColor(Qt::yellow);//黄色
customPlot->graph(0)->setPen(pen); //


二、填充色
画刷QBrush设置曲线和0轴填充色围成区域的颜色,可以看到重叠部分颜色是叠加的

代码例子:

customPlot->addGraph();
customPlot->graph(0)->setBrush(QBrush(QColor(0,0,255,150))); //蓝色,透明度150
customPlot->addGraph();
customPlot->graph(1)->setBrush(QBrush(QColor(255,0,0,150))); //红色,透明度150


三、数据点连接方式
先看一下官网的图例https://www.qcustomplot.com/index.php/demos/linestyledemo

调用setLineStyle设置数据点连接方式,QCPGraph::LineStyle有几个枚举值

QCPGraph::LineStyle说明
lsNone无连接线
lsLine直线连接(默认)
lsStepLeft阶梯线,高度和左边数据点对齐
lsStepRight阶梯线,高度和右边数据点对齐
lsStepCenter阶梯线,阶梯在两个数据中间
lsImpulse脉冲线

代码例子:

customPlot->graph(0)->setLineStyle((QCPGraph::LineStyle::lsStepLeft));//阶梯线,左对齐

四、散点图,点样式
散点就是在图上用某个图形标出数据点,默认情况下是不显示数据点图形的,需要通过调用setScatterStyle(const QCPScatterStyle & style)来设置散点样式,才会显示点图案,传递的参数是一个QCPScatterStyle对象,如果想只显示数据点而不显示线,可以设置线样式为lsNone

只显示散点的方法:

//不显示连线
customPlot->graph(0)->setLineStyle(QCPGraph::LineStyle::lsNone);
//数据点+号
customPlot->graph(0)->setScatterStyle(QCPScatterStyle(QCPScatterStyle::ScatterShape::ssPlus,5));

调用setScatterSkip(int)设置绘制一个点后跳过的点数,可以让曲线变得稀疏

//绘制一个点后跳过2个点   

customPlot->graph(0)->setScatterSkip(2);


(1)QCPScatterStyle::ScatterShape枚举样式
先看一下官网的图例https://www.qcustomplot.com/index.php/demos/scatterstyledemo

QCPScatterStyle::ScatterShape的样式包含的很多基本形状,一般足够使用了

QCPScatterStyle::ScatterShape说明
ssNone没有散点(默认)
ssDot单像素点(要用能改变大小的圆请使用ssCircle或ssDisc)
ssCross
ssPlus
ssCircle
ssDisc填充的是pen的颜色
ssSquare
ssDiamond
ssStar
ssTriangle
ssTriangleInverted
ssCrossSquare
ssPlusSquare
ssCrossCircle
ssPlusCircle
ssPeace
ssPixmap通过setPixmap设置的图像
ssCustom通过setCustomPath设置的路径

(2)ssCustom自定义散点
注意到官网图例的最后一条曲线的散点图案是自定义的三叶草的形状,其实原理就是通过QPainterPath来实现的

通过添加三条贝塞尔曲线组图案:

QPainterPath customScatterPath;
//添加3条贝塞尔曲线,形成叶子形状
for (int i=0; i<3; ++i)
      customScatterPath.cubicTo(qCos(2*M_PI*i/3.0)*9, qSin(2*M_PI*i/3.0)*9, qCos(2*M_PI*(i+0.9)/3.0)*9, qSin(2*M_PI*(i+0.9)/3.0)*9, 0, 0);
//设定散点图案为自定义的路径
customPlot->graph()->setScatterStyle(QCPScatterStyle(customScatterPath, QPen(Qt::black, 0), QColor(40, 70, 255, 50), 10));


贝塞尔曲线挺复杂的,可以试着画个简单的五角星

  QVector<double> x1(1),x2(4),y1(1),y2(4); 
 //数据点(五角星位置)   
    x1[0]=0.5;y1[0]=0.75;
    x2[0]=1;x2[1]=1;
    x2[2]=1.2;x2[3]=1.2;
    y2[0]=0.9;y2[1]=0.6;y2[2]=0.8;y2[3]=0.7;
    // 添加两个graph,一个显示大五星,另一个显示小五星
    customPlot->addGraph();
    customPlot->graph(0)->setData(x1, y1);
    customPlot->addGraph();
    customPlot->graph(1)->setData(x2, y2);
    //不显示连线
    customPlot->graph(0)->setLineStyle(QCPGraph::LineStyle::lsNone);
    customPlot->graph(1)->setLineStyle(QCPGraph::LineStyle::lsNone);
    //五角星路径
    QPainterPath customScatterPath;
    customScatterPath.moveTo(qCos(18/180.0*M_PI)*2, -qSin(18/180.0*M_PI)*2);
    customScatterPath.lineTo(qCos(162/180.0*M_PI)*2,-qSin(162/180.0*M_PI)*2);
    customScatterPath.lineTo(qCos(306/180.0*M_PI)*2,-qSin(306/180.0*M_PI)*2);
    customScatterPath.lineTo(qCos(90/180.0*M_PI)*2, -qSin(90/180.0*M_PI)*2);
    customScatterPath.lineTo(qCos(234/180.0*M_PI)*2,-qSin(234/180.0*M_PI)*2);
    customScatterPath.closeSubpath();//闭合路径
    //设置散点样式为自定义的路径
    customPlot->graph(0)->setScatterStyle(QCPScatterStyle(customScatterPath, QPen(Qt::black, 0), Qt::yellow, 100));
    customPlot->graph(1)->setScatterStyle(QCPScatterStyle(customScatterPath, QPen(Qt::black, 0), Qt::yellow, 40));
    //x轴范围
    customPlot->xAxis->setRange(0,3);
    //y轴范围
    customPlot->yAxis->setRange(0,1);
    customPlot->replot();


(3)ssPixmap图像
要显示好看的图案,用自定义路径的方式很复杂,实际上直接使用图像更方便

图像添加到资源文件里

QCPScatterStyle设置为图像就行了

//数据点显示图像
customPlot->graph(0)->setScatterStyle(QCPScatterStyle(QPixmap(":image/huaji.png")));

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值