Qt使用QCustomPlot開發

1、入門

一、下載源文件http://www.qcustomplot.com/；

二、把.cpp和.h放在工程目錄下，並將cpp和h加入工程；

三、在.pro中：QT += printsupport；

四、在ui中添加一個Widget，右鍵提高爲，輸入：QCustomPlot，改變對象名稱爲customPlot；

五、加入代碼：

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：

一、設置x座標軸爲時間

QSharedPointer<QCPAxisTickerTime> timeTicker(new QCPAxisTickerTime);
ui.customPlot->xAxis->setTicker(timeTicker);
ui.customPlot->xAxis->setRange(-60 * 3.5, 60 * 11);
timeTicker->setTimeFormat("%m:%s");

double secs = QCPAxisTickerDateTime::dateTimeToKey(QDateTime::currentDateTime());//橫座標

 二、設置位置

setPositionAlignment（Qt::AlignTop）

三、座標軸刻度樣式

 

使用QCPAxis::setTicker (QSharedPointer< QCPAxisTicker > )來定製刻度

 

四、設置刻度高度

setTickLength

五、設置座標軸樣式

setUpperEnding

 六、設置兩個線條之間填充

ui->customplot->graph(0)->setBrush(Qt::cyan);

ui->customplot->graph(0)->setChannelFillGraph(ui->customplot_2_1->graph(1));

 

七、設置曲線形狀

QCPGraph::setScatterStyle(QCPScatterStyle &style);  

八、座標軸相關參數命名

九、座標區相關距離命名

　　9.一、設置整個cp座標軸距離左側的距離

　　ui.customPlot->yAxis->setPadding(40);//距離左邊的距離

十、設置刻度label旋轉

ui.customPlot->xAxis->setTickLabelRotation(60);

 十一、設置座標軸方向

ui.customPlot->xAxis->setRangeReversed(false);//x軸反向

 十二、獲取當前x、y軸range的左右值

realLeft = ui.customPlot->xAxis->range().lower;
realRight = ui.customPlot->xAxis->range().upper;

1三、設置當前顯示範圍有多少個刻度

 ticker->setTickCount(n);

1四、設置長刻度步長

QCPAxisTickerFixed ticker->setTickStep(0.1);

1五、時間軸定製

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】

1六、QCPAbstractItem

 

 

2、高級

一、單級柱狀圖【只有一種顏色】

①、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();

④、效果

 二、多級柱狀圖

先看效果【官網】

①、聲明

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();

 三、更好看的網格線

①、默認

 

②、定製

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));

四、鼠標事件

頭文件中：

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;
}

五、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("......"); 

 六、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 );