一、入門
1、下載源文件http://www.qcustomplot.com/;
2、把.cpp和.h放在工程目錄下,並將cpp和h加入工程;
3、在.pro中:QT += printsupport;
4、在ui中添加一個Widget,右鍵提升為,輸入:QCustomPlot,改變對象名稱為customPlot;
5、加入代碼:
void MainWindow::initUi()
{
QVector<double> x(101), y(101); // initialize with entries 0..100
for (int i=0; i<101; ++i)
{
x[i] = i/50.0 - 1; // x goes from -1 to 1
y[i] = x[i]*x[i]; // let's plot a quadratic function
}
ui->customPlot->addGraph();// 添加數據曲線(一個圖像可以有多個數據曲線),graph(0);可以獲取某個數據曲線(按添加先后排序);默認x1,y1軸
ui->customPlot->addGraph(ui->customPlot->xAxis,ui->customPlot->yAxis2);//添加的曲線以x1,y2為基准軸
ui->customPlot->graph(0)->setData(x, y);// setData();為數據曲線關聯數據
ui->customPlot->xAxis->setLabel("x");// 為坐標軸添加標簽
ui->customPlot->yAxis->setLabel("y");
ui->customPlot->xAxis->setRange(-1, 1);// 設置坐標軸的范圍,以看到所有數據
ui->customPlot->yAxis->setRange(-1, 1);
ui->customPlot->replot();// 重畫圖像
//ui->customPlot->rescaleAxes();//自動設置最合適的顯示范圍
//ui->customPlot->setInteractions(QCP::iRangeDrag | QCP::iRangeZoom);//可移動可拖放
//ui->customPlot->graph(0)->addData(double,double);//追加點
}
效果:
6:、添加QCustomPlot的幫助文檔
在下載的源碼包里有個qch文件,放在:D:\QT5.8\Docs\Qt-5.8里面,就可以使用幫助文檔了
ps:
1、設置x坐標軸為時間
int showTime=60;//60秒 QDateTime dateTime = QDateTime::currentDateTime(); double now = dateTime.toTime_t(); QSharedPointer<QCPAxisTickerDateTime> xTicker(new QCPAxisTickerDateTime); xTicker->setTickCount(2); xTicker->setDateTimeFormat("yyyy.MM.dd-hh:mm");// ui->customPlot_4_1->xAxis->setTicker(xTicker); xTicker->setTickStepStrategy(QCPAxisTicker::tssMeetTickCount); ui->customPlot_4_1->xAxis->setRange(now-showTime,now+showTime);//顯示多久的數據,前后60秒
最小單位是秒
2、設置位置
setPositionAlignment(Qt::AlignTop)
3、坐標軸刻度樣式
使用QCPAxis::setTicker (QSharedPointer< QCPAxisTicker > )來定制刻度
4、設置刻度高度
setTickLength
5、設置坐標軸樣式
setUpperEnding
6、設置兩個線條之間填充
ui->customplot->graph(0)->setBrush(Qt::cyan);
ui->customplot->graph(0)->setChannelFillGraph(ui->customplot_2_1->graph(1));
7、設置曲線形狀
QCPGraph::setScatterStyle(QCPScatterStyle &style);
8、坐標軸相關參數命名
9、坐標區相關距離命名
9.1、設置整個cp坐標軸距離左側的距離
ui.customPlot->yAxis->setPadding(40);//距離左邊的距離
10、設置刻度label旋轉
ui.customPlot->xAxis->setTickLabelRotation(60);
11、設置坐標軸方向
ui.customPlot->xAxis->setRangeReversed(false);//x軸反向
12、獲取當前x、y軸range的左右值
realLeft = ui.customPlot->xAxis->range().lower;
realRight = ui.customPlot->xAxis->range().upper;
13、設置當前顯示范圍有多少個刻度
ticker->setTickCount(n);
ui->customplot_2_3->xAxis->ticker()->setTickCount(5);
14、設置長刻度步長
QCPAxisTickerFixed ticker->setTickStep(0.1);
15、時間軸定制
QDateTime dateTime = QDateTime::currentDateTime(); double now = dateTime.toTime_t(); QSharedPointer<QCPAxisTickerDateTime> yTicker(new QCPAxisTickerDateTime); yTicker->setTickCount(2); yTicker->setDateTimeFormat("yyyy.MM.dd-hh:mm");// ui->customPlot->xAxis->setTicker(yTicker); yTicker->setTickStepStrategy(QCPAxisTicker::tssMeetTickCount); ui->customPlot->xAxis->setRange(now-3600,now+3600);//顯示3個小時的數據
默認tickStep為1s,所以沒有setTickStep函數進行設置
一般坐標軸定制需要兩個參數:坐標軸顯示范圍【range】;此坐標軸有多少個刻度【setTickCount】
16、QCPAbstractItem
17、繪制一個點后跳過2個點
customPlot->graph(0)->setScatterSkip(2);
18、設置位置
①、
itemText_2_2->position->setType(QCPItemPosition::ptPlotCoords);//以坐標點為參考
itemText_2_2->position->setCoords(100,200);//x=100,y=200
②、
itemText_2_2->position->setType(QCPItemPosition::ptAxisRectRatio);//用0~1比例代表整個plot
itemText_2_2->position->setCoords(1,1);//右下角
18、legend設置透明
ui->customplot_5_1->legend->setBrush(QColor(255,255,255,0));
二、高級
1、單級柱狀圖【只有一種顏色】
①、Bar聲明
QCPBars *cpBar;
②、定義
cpBar = new QCPBars(ui.customPlot->xAxis, ui.customPlot->yAxis);
③、設置值
QVector<double> ticks;//定制值
ticks << 1 << 2 << 3 << 4;
QVector<double> yCount;
yCount<<2<<3<<3<<1;
cpBar->setData(ticks, yCount);
ui.customPlot->replot();
④、效果
2、多級柱狀圖
先看效果【官網】
①、聲明
QCPBars *max;
QCPBars *min;
QCPBars *sdDev;
QCPBars *varice;
②、定義
max = new QCPBars(ui.customPlot->xAxis, ui.customPlot->yAxis);
min = new QCPBars(ui.customPlot->xAxis, ui.customPlot->yAxis);
sdDev = new QCPBars(ui.customPlot->xAxis, ui.customPlot->yAxis);
varice = new QCPBars(ui.customPlot->xAxis, ui.customPlot->yAxis);
③、相關設置
max->setStackingGap(0);//設置上下bar之間的距離
min->setStackingGap(0);
sdDev->setStackingGap(0);
varice->setStackingGap(0);
max->setAntialiased(false); //提供更清晰、像素對齊的條形邊框
min->setAntialiased(false);
sdDev->setAntialiased(false);
varice->setAntialiased(false);
sdDev->moveAbove(varice);//必須要寫和這個,不然不會重疊
min->moveAbove(sdDev);//設置位置
max->moveAbove(min);
④、設置值
QVector<double> ticks;//定制值
ticks << 1 << 2 << 3 << 4;
QVector<double> yCount;
yCount<<2<<3<<3<<1;
max->setData(ticks, yCount);
min->setData(ticks, yCount);
varice->setData(ticks, yCount);
sdDev->setData(ticks, yCount);
ui.customPlot->replot();
3、更好看的網格線
①、默認
②、定制
ui.customPlot->xAxis->grid()->setVisible(true);
ui.customPlot->xAxis->grid()->setPen(QPen(QColor(130, 130, 130), 0, Qt::DotLine));
ui.customPlot->yAxis->grid()->setSubGridVisible(true);
ui.customPlot->yAxis->grid()->setPen(QPen(QColor(130, 130, 130), 0, Qt::SolidLine));
ui.customPlot->yAxis->grid()->setSubGridPen(QPen(QColor(130, 130, 130), 0, Qt::DotLine));
4、鼠標事件
頭文件中:
void myMousePressEvent(QMouseEvent *event);
void myMouseReleaseEvent(QMouseEvent *event);
綁定:
connect(ui.customPlot, SIGNAL(mousePress(QMouseEvent*)), this, SLOT(myMousePressEvent(QMouseEvent*)));
connect(ui.customPlot, SIGNAL(mouseRelease(QMouseEvent*)), this, SLOT(myMouseReleaseEvent(QMouseEvent*)));
實現:
void RoadAllData::myMousePressEvent(QMouseEvent *event)
{
if (event->button() != Qt::LeftButton)return;//如果不是鼠標左鍵按下則返回
int x_pos = event->pos().x();
int y_pos = event->pos().y();
// 把鼠標坐標點 轉換為 QCustomPlot 內部坐標值 (pixelToCoord 函數)
// coordToPixel 函數與之相反 是把內部坐標值 轉換為外部坐標點
double x_val = ui.customPlot->xAxis->pixelToCoord(x_pos);
double y_val = ui.customPlot->yAxis->pixelToCoord(y_pos);
}
void RoadAllData::myMouseReleaseEvent(QMouseEvent *event)
{
if (event->button() != Qt::LeftButton)return;
}
5、textitem的使用
①、聲明
QCPItemText* itemText = NULL;
②、定義
QCPItemText* itemText = new QCPItemText(ui->customplot_1_1); itemText->setPositionAlignment(Qt::AlignHCenter | Qt::AlignBottom);//以哪個位置為標准 itemText->position->setType(QCPItemPosition::ptAxisRectRatio);//以屏幕可見范圍為參考 itemText->position->setCoords(0.5, 0.95); //位置,從坐標矩形左上開始為(0,0),右下角為(1,1),x是向右,y是向下 itemText->setFont(QFont(font().family(), 12)); //字體庫,大小 itemText->setTextAlignment(Qt::AlignLeft); #if CLOSE_IF itemText->setPen(QPen(Qt::black)); //邊框 #endif itemText->setText("增益下降0.225dB\n指向偏離0°\n波束展寬4.9954%\n副瓣抬高7.353dB");// itemText->setBrush(QBrush(QColor("#C4DDC3")));//背景色 itemText->setPadding(QMargins(3, 3, 3, 3));
相關設置可參考:https://blog.csdn.net/umke888/article/details/54572647
③、設置值
itemText->setText("......");
6、QSlider與顯示range對應
**領導說,界面固定,用滑條來滑動。這都21世紀了,為什么要用20世紀的東西,不過行,**滿足你,/微笑
①、使用QSlider,按下、釋放、獲取值
QObject::connect(ui.horizontalSlider, SIGNAL(valueChanged(int)), this, SLOT(sliderMovedSlot(int))); QObject::connect(ui.horizontalSlider, SIGNAL(sliderPressed()), this, SLOT(sliderPressSlot())); QObject::connect(ui.horizontalSlider, SIGNAL(sliderReleased()), this, SLOT(sliderReleaseSlot()));
②、通過設置range來顯示Customplot當前位置
ui.customPlot->xAxis->setRange(realMax, realMax );