QT系列之曲线图绘制（推荐QCustomPlot） |
您所在的位置：网站首页 › 曲线图代码 › QT系列之曲线图绘制（推荐QCustomPlot） |
QT系列之曲线图绘制（推荐QCustomPlot）
|
Qt做曲线图绘制有很多类，如QChart,QCustomPlot和QWT。我之前一直用QChart，但是感觉它在数据量大的时候会有点卡顿，甚至有时候会直接让程序崩溃。所以推荐还是一步到位，直接用其他两种吧！ 这篇博客的示例代码见咸鱼：
目录 这篇博客的示例代码见咸鱼： 2.QChart的边界定义 2.1 效果对比 3.QCustomPlot的使用 3.1 QCustomPlot的简单使用 3.2 设置图例名称 3.3 设置背景，线条颜色，线条宽度，字体，坐标轴间隔； 5.设置可缩放，可拖拽 6.显示鼠标点所在坐标值； 7.支持框选折线图，筛选表中数据的功能 8.右键快捷功能 9 自定义X轴刻度 2.QChart的边界定义
下图左是不加如下的代码，下图右是加了如下的代码效果。 chart->setContentsMargins(0, 0, 0, 0); //设置外边界全部为0 chart->setMargins(QMargins(0, 0, 0, 0));//设置内边界全部为0
下图左是不加如下的代码，下图右是加了如下的代码效果。 chart->layout()->setContentsMargins(0, 0, 0, 0);//设置边界为0
使用QCustomPlot需要先下载这个类，然后将.h和.cpp文件添加，最后将widget提升为QCustomPlot类。 3.1 QCustomPlot的简单使用如下的代码包括：添加一个图例，添加图例的数据，设置坐标轴的显示范围。 //定义两个可变数组存放绘图的坐标数据 QVector x(101),y(101);//分别存放x和y坐标的数据,101为数据长度 //添加数据，我们这里演示y=x^3,为了正负对称，我们x从-50到+50 for(int i=0;iwidget->addGraph();//添加一条数据 ui->widget->graph(0)->setData(x,y);//注意这里必须为QVector且是double类型的变量 //设置坐标轴显示范围,否则我们只能看到默认的范围 ui->widget->xAxis->setRange(-60,60); ui->widget->yAxis->setRange(-60*60*60-100,60*60*60+100);运行效果图如下：
下面代码的0代表第一个图例，如果有多个图例可以是1，2，3等等。新建图例是上面的addgraph()函数。 //设置图例名称 ui->widget->graph(0)->setName("line"); ui->widget->legend->setVisible(true);效果图如下：
各类图类的总结链接：Qt之qcustomplot绘图总结_咖啡的博客-CSDN博客_qcustomplot画扇形 详细的图层相关知识及背景设置见链接：Qt之qcustomplot背景色改变_咖啡的博客-CSDN博客_qcustomplot背景颜色 图的外观设置见链接：https://segmentfault.com/a/1190000021931918 大佬的学习博客见链接：QCustomplot使用分享(七) 层(完结) - 朝十晚八 - 博客园 线条样式的设置见链接：QCustomPlot使用心得三：线样式，点样式_yxy244的博客-CSDN博客_qcustomplot样式 坐标轴设置的详细博客见链接：QCustomPlot使用心得五：坐标轴常用属性设置_yxy244的博客-CSDN博客_qcustomplot自适应坐标 第一，背景的设置 由于图层有多层，每层都有背景，下面的代码是设置我们通常理解的坐标轴背景颜色。 //设置背景颜色 QLinearGradient plotGradient; plotGradient.setStart(0, 0); plotGradient.setFinalStop(0, 350); plotGradient.setColorAt(0, QColor(80, 80, 80)); plotGradient.setColorAt(1, QColor(50, 50, 50)); //ui->widget->setBackground(plotGradient); ui->widget->axisRect()->setBackground(plotGradient); // 设置QCPAxisRect背景颜色效果图如下：
第二，设置线条颜色，宽度以及图刷 //设置线条颜色 QPen pen; pen.setWidth(3);//线宽 pen.setColor(Qt::red);//颜色 ui->widget->graph(0)->setPen(pen); //设置画刷：与0刻度线围成区域 ui->widget->graph(0)->setBrush(QBrush(QColor(0, 0, 255, 100)));//后面的100是不透明度效果图如下：
第三，设置坐标轴刻度线的风格 //设置坐标轴刻度线 ui->widget->xAxis->setBasePen(QPen(Qt::white, 1)); // 轴线的画笔 ui->widget->xAxis->setTickPen(QPen(Qt::white, 1)); // 轴刻度线的画笔 ui->widget->xAxis->setSubTickPen(QPen(Qt::white, 1)); // 轴子刻度线的画笔 ui->widget->xAxis->setTickLabelColor(Qt::white); // 轴刻度文字颜色 ui->widget->xAxis->setLabel("x轴"); // 只有设置了标签，轴标签的颜色才会显示 ui->widget->xAxis->setLabelColor(Qt::white); // 轴标签颜色 ui->widget->xAxis->setTickLengthIn(3); // 轴线内刻度的长度 ui->widget->xAxis->setTickLengthOut(5); // 轴线外刻度的长度 ui->widget->xAxis->setUpperEnding(QCPLineEnding::esSpikeArrow); // 设置轴线结束时的风格为 实角三角形但内部有凹陷的形状， setLowerEnding设置轴线开始时的风格 ui->widget->yAxis->setBasePen(QPen(Qt::white, 1)); // 轴线的画笔 ui->widget->yAxis->setTickPen(QPen(Qt::white, 1)); // 轴刻度线的画笔 ui->widget->yAxis->setSubTickPen(QPen(Qt::white, 1)); // 轴子刻度线的画笔 ui->widget->yAxis->setTickLabelColor(Qt::white); // 轴刻度文字颜色 ui->widget->yAxis->setLabel("y轴"); // 只有设置了标签，轴标签的颜色才会显示 ui->widget->yAxis->setLabelColor(Qt::white); // 轴标签颜色 ui->widget->yAxis->setTickLengthIn(3); // 轴线内刻度的长度 ui->widget->yAxis->setTickLengthOut(5); // 轴线外刻度的长度 ui->widget->yAxis->setUpperEnding(QCPLineEnding::esSpikeArrow); // 设置轴线结束时的风格为 实角三角形但内部有凹陷的形状， setLowerEnding设置轴线开始时的风格效果图如下：
第四，字体设置 看不出变化，这个也不太重要吧。 //设置字体 ui->widget->setFont(QFont(font().family(), 9));//设置文本的字体 //setLabelFont： 设置label字体 //setTickLabelFont：设置刻度label字体第五，坐标轴间隔 //坐标轴间隔 ui->widget->xAxis->setAutoTickStep(false); //先关闭自动间隔 ui->widget->yAxis->setAutoTickStep(false); //先关闭自动间隔 ui->widget->xAxis->setTickStep(30); ui->widget->yAxis->setTickStep(50000);效果图如下：
这里的坐标值，是以坐标轴为基准的。且坐标信息是附在鼠标处显示的。 //第一，包含鼠标事件头文件 #include //第二，构建鼠标事件与响应槽函数的连接 /**** 鼠标点数据显示 ****/ connect(ui->widget,&QCustomPlot::mouseMove,this,&MainWindow::myMoveEvent); //第三，鼠标响应事件 void MainWindow::myMoveEvent(QMouseEvent *event) { double x = event->pos().x(); double y = event->pos().y(); double x_ = ui->widget->xAxis->pixelToCoord(x); double y_ = ui->widget->yAxis->pixelToCoord(y); QString str = QString("x:%1;\ny:%2").arg(QString::number(x_,10,3)) .arg(QString::number(y_,10,3)); QToolTip::showText(cursor().pos(),str,ui->widget); }效果图如下：
大佬博客的参考链接：QCustomPlot使用心得六：框选放大，拖动，选中数据_yxy244的博客-CSDN博客_qcustomplot框选放大 步骤：第一，设置曲线图可框选；第二，定义框选信号的槽函数。 下面的代码是槽函数。void MainWindow::on_widget_selectionChangedByUser()是响应曲线图框选动作的。 注意：on_widget_selectionChangedByUser()函数隐含着把selectionChangedByUser()信号和这个函数（作为槽函数）连接起来了。 未来移植的时候，需要改的就是widget这个名字。比如你的UI里，如下图，绘图用控件的名称是Curve就改成on_Curve_selectionChangedByUser() 对于信号与槽机制，搜索一下QMetaObject::connectSlotsByName就会有答案了。隐含的信号与槽函数定义方式。
有几个关键类：第一，动作类QAction；第二，菜单类QMenu。 动作类就是菜单内的具体操作；菜单分为一级菜单，二级菜单。 菜单类可以添加动作，可以添加下级菜单； ui->widget->setContextMenuPolicy(Qt::CustomContextMenu);必须添加，响应右键操作。通过connect给Action定义具体操作。 /**** 设置鼠标右键菜单 ****/ //主菜单的设置 //初始化动作 QAction * curveAction1 = new QAction("btnFirstAction",this); QAction * curveAction2 = new QAction("btnSecondAction",this); //初始化菜单 QMenu * curveMenu = new QMenu(this); //动作添加到菜单 curveMenu->addAction(curveAction1); curveMenu->addAction(curveAction2); //子菜单的设置 QMenu *childMenu = new QMenu(); childMenu->setTitle("df");//给子菜单取名字 QAction *delfile = new QAction(childMenu); delfile->setText("删除"); QAction *addfile = new QAction(childMenu); addfile->setText("添加"); childMenu->addAction(delfile); childMenu->addAction(addfile); curveMenu->addMenu(childMenu); //给动作设置信号槽 connect( curveAction1, &QAction::triggered, [=]() { qDebug()setTicker(textTicker);效果如下图所示，见X轴的刻度：
|
【本文地址】