QT系列之曲线图绘制（推荐QCustomPlot）
Qt做曲线图绘制有很多类，如QChart,QCustomPlot和QWT。我之前一直用QChart，但是感觉它在数据量大的时候会有点卡顿，甚至有时候会直接让程序崩溃。所以推荐还是一步到位，直接用其他两种吧！
这篇博客的示例代码见咸鱼：
1.一个好的曲线图应该具有的功能
1.美观——背景，线条颜色，线条宽度，字体，边框间距，坐标轴间隔；
2.以鼠标为中心进行缩放，以及重置曲线图；
3.显示鼠标点所在坐标值；
4.图中曲线的名称图例；
5.支持拖拽；
6.支持添加预警线；
7.支持多通道数据显示；
8.支持数据统计功能；——最大值，最小值，平均值，方差。
9.支持自定义曲线的显示；——图例及图例框位置、效果、字体、颜色、X轴标签文字、背景颜色、背景标签线大小
10.支持框选折线图，筛选表中数据的功能；
2.QChart的边界定义
2.1 效果对比
下图左是不加如下的代码，下图右是加了如下的代码效果。
chart->setContentsMargins(0, 0, 0, 0); //设置外边界全部为0
chart->setMargins(QMargins(0, 0, 0, 0));//设置内边界全部为0
下图左是不加如下的代码，下图右是加了如下的代码效果。
chart->layout()->setContentsMargins(0, 0, 0, 0);//设置边界为0
3.QCustomPlot的使用
使用QCustomPlot需要先下载这个类，然后将.h和.cpp文件添加，最后将widget提升为QCustomPlot类。
3.1 QCustomPlot的简单使用
如下的代码包括：添加一个图例，添加图例的数据，设置坐标轴的显示范围。
//定义两个可变数组存放绘图的坐标数据
QVector<double> x(101),y(101);//分别存放x和y坐标的数据,101为数据长度
//添加数据，我们这里演示y=x^3,为了正负对称，我们x从-50到+50
for(int i=0;i<101;i++)
{
x[i] = i-50;
y[i] = x[i] * x[i] * x[i];
}
ui->widget->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);运行效果图如下：
3.2 设置图例名称
下面代码的0代表第一个图例，如果有多个图例可以是1，2，3等等。新建图例是上面的addgraph()函数。
//设置图例名称
ui->widget->graph(0)->setName("line");
ui->widget->legend->setVisible(true);效果图如下：
3.3 设置背景，线条颜色，线条宽度，字体，坐标轴间隔；
各类图类的总结链接：https://blog.csdn.net/u014252478/article/details/80430000
详细的图层相关知识及背景设置见链接：https://blog.csdn.net/u014252478/article/details/79928433
图的外观设置见链接：https://segmentfault.com/a/1190000021931918
大佬的学习博客见链接：https://www.cnblogs.com/swarmbees/p/6060473.html
线条样式的设置见链接：https://blog.csdn.net/yxy244/article/details/100033549
坐标轴设置的详细博客见链接：https://blog.csdn.net/yxy244/article/details/100311112
第一，背景的设置
由于图层有多层，每层都有背景，下面的代码是设置我们通常理解的坐标轴背景颜色。
//设置背景颜色
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);效果图如下：
5.设置可缩放，可拖拽
//设置曲线可拖拽 滚轮放大缩小 图像可选择
ui->widget->setInteractions(QCP::iRangeDrag | QCP::iRangeZoom | QCP::iSelectPlottables);6.显示鼠标点所在坐标值；
这里的坐标值，是以坐标轴为基准的。且坐标信息是附在鼠标处显示的。
//第一，包含鼠标事件头文件
#include <QMouseEvent>
//第二，构建鼠标事件与响应槽函数的连接
/**** 鼠标点数据显示 ****/
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);
}效果图如下：
7.支持框选折线图，筛选表中数据的功能
大佬博客的参考链接：https://blog.csdn.net/yxy244/article/details/100547688
步骤：第一，设置曲线图可框选；第二，定义框选信号的槽函数。
下面的代码是槽函数。void MainWindow::on_widget_selectionChangedByUser()是响应曲线图框选动作的。
注意：on_widget_selectionChangedByUser()函数隐含着把selectionChangedByUser()信号和这个函数（作为槽函数）连接起来了。 未来移植的时候，需要改的就是widget这个名字。比如你的UI里，如下图，绘图用控件的名称是Curve就改成on_Curve_selectionChangedByUser()
对于信号与槽机制，搜索一下QMetaObject::connectSlotsByName就会有答案了。隐含的信号与槽函数定义方式。
//选择的数据变化
void MainWindow::on_widget_selectionChangedByUser()
{
QCustomPlot* customPlot=ui->widget;
qDebug()<<"ok111";
//清空listwidget
//ui->lst_data->clear();
for(int i=0;i<customPlot->graphCount();i++)
{
qDebug()<<"ok1";
//遍历有被选中的graph
if(customPlot->graph(i)->selected())
{
qDebug()<<"ok2";
QCPDataSelection selection =customPlot->graph(i)->selection();
//遍历选中范围
for(int j=0;j<selection.dataRangeCount();j++)
{
qDebug()<<"ok3";
QCPDataRange dataRange = selection.dataRange(j);
//遍历数据
for(int k=dataRange.begin();k<dataRange.end();k++)
{
qDebug()<<"ok4";
QString str_key = QString::number(customPlot->graph(i)->data()->at(k)->key);
QString str_value = QString::number(customPlot->graph(i)->data()->at(k)->value);
QString str_at= QString::number(i);
//添加到listwidget
qDebug()<<"曲线"<<str_at<<"："<<str_key<<", "<<str_value;
//ui->lst_data->addItem("曲线"+str_at+"："+str_key+", "+str_value);
}
}
}
}
//滚动到底部
//ui->lst_data->scrollToBottom();
// ui->lst_data->scrollToTop();
}下面的代码是设置曲线图可框选。
/**** 框选曲线图，获得选中数据 ****/
//数据多选
ui->widget->graph(0)->setSelectable(QCP::SelectionType::stMultipleDataRanges);
//选择框模式：无
ui->widget->setSelectionRectMode(QCP::SelectionRectMode::srmNone);
//选框黑色虚线
ui->widget->selectionRect()->setPen(QPen(Qt::black,1,Qt::DashLine));
ui->widget->selectionRect()->setBrush(QBrush(QColor(0,0,100,50)));
//设置可框选
ui->widget->setInteraction(QCP::iRangeDrag,false);//取消拖动
ui->widget->setSelectionRectMode(QCP::SelectionRectMode::srmSelect);
//修改多选按键，默认Ctrl。这个函数是设置选中数据的方式
//customPlot->setMultiSelectModifier(Qt::KeyboardModifier::ControlModifier);
//滚动缩放、图表可选、多选
//ui->widget->setInteractions(QCP::iRangeZoom | QCP::iSelectPlottables| QCP::iMultiSelect);//
qDebug()<<"ok0";
ui->widget->replot();8.右键快捷功能
有几个关键类：第一，动作类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()<<"I'm btnFirstAction";
});
connect( curveAction2, &QAction::triggered, [=]()
{
qDebug()<<"I'm btnSecondAction";
});
//给曲线图设置上下文菜单策略，鼠标右键点击曲线图时会发送一个void QWidget::customContextMenuRequested(const QPoint &pos)信号
ui->widget->setContextMenuPolicy(Qt::CustomContextMenu);
//给信号设置相应的槽函数
connect(ui->widget,&QLabel::customContextMenuRequested,[=](const QPoint &pos)
{
qDebug()<<pos;//参数pos用来传递右键点击时的鼠标的坐标，这个坐标一般是相对于控件左上角而言的
curveMenu->exec(QCursor::pos());
});手机扫一扫
移动阅读更方便
你可能感兴趣的文章