QCustomPlot繪製時間日期折線圖

QCustomPlot的配置和安裝非常簡單,沒有的請自行百度。

這個實例要做的是:顯示一個7天的體溫,每天3個數據,一共21個數據,要求折線圖的橫座標軸爲日期,其實日期爲第一天體溫的日期。

在這我們就需要了解一下QCustomPlot中橫軸日期的設置機制,他的日期或者時間設置是統計距離“1970-1-1 00:00:00”到你想設置日期的秒數,那麼現在我們在代碼中需要做的就是將我們的的字符串格式的日期首先轉化成 QDateTime類型,然後在使用totime_t()換算成距離1970年的秒數存到數組中。

  1. 首先,建立項目工程,取名graph,基類默認MainWindow就可以,然後將qcustomplot.cpp和qcustomplot.h兩個文件複製到項目文件下。

  2. 打開graph.pro文件,在第9行末寫上printsupport,同時將qcustomplot.cpp和qcustomplot.h加入到項目工程中。
    這裏寫圖片描述

  3. 打開mainwindow.ui文件,首先加入一個水平佈局,然後拖入一個QWidget區域,然後右鍵選中點擊,選擇提升爲…
    這裏寫圖片描述

  4. 在彈出來的窗口中,在提升的類名稱中寫入QCustomPlot,然後確認添加。
    這裏寫圖片描述
    然後右鍵提升爲,選擇QCustomPlot。現在我們運行下自己的程序,會出現一個座標軸,那麼到這一步,我們已經可以使用QCustomPlot。
    這裏寫圖片描述
  5. 現在我們開始畫折線圖。在mainwindow.h加入qcustomplot.h頭文件,並且在聲明一個函數,
    private:
    void GraphDemo(QString results);
    QString temp;//定義一個臨時變量

    現在我們在mainwindow.cpp中實現這個函數,右鍵選中Refactor–”在mainwindow.cpp中添加定義“。
    這裏寫圖片描述
    然後我們在函數內寫入如下代碼:
void MainWindow::GraphDemo(QString results)
{
    ui->widget->setLocale(QLocale(QLocale::Chinese, QLocale::China));
    ui->widget->addGraph();
    QPen pen;
    pen.setColor(QColor(0, 0, 255, 200));
    ui->widget->graph(0)->setLineStyle(QCPGraph::lsLine);//設置數據點由一條直線連接
    ui->widget->graph(0)->setPen(pen);

    ui->widget->addGraph(); // 紅色點
    ui->widget->graph(1)->setPen(QPen(Qt::red));
    ui->widget->graph(1)->setLineStyle(QCPGraph::lsNone);
    ui->widget->graph(1)->setScatterStyle(QCPScatterStyle::ssDisc);

    QStringList list = results.split("#");//假設數據
    qDebug()<<list<<list.length();
    QVector<double> time(21), value(21);//給數組賦值,時間和數值 7*3=21個數據
    for (int i=0; i<21; ++i)
    {
        time[i] = QDateTime::fromString(list[2*i],"yyyy-MM-dd hh:mm:ss").toTime_t();
        temp = list.at(2*i+1);
        value[i] = temp.toInt();
    }
    ui->widget->graph(0)->setData(time, value);//設置數據
    ui->widget->graph(0)->rescaleValueAxis();
    ui->widget->graph(1)->addData(time, value);//設置點

    //    配置下軸顯示日期和時間,而不是數字:
    ui->widget->xAxis->setTickLabelType(QCPAxis::ltDateTime);
    ui->widget->xAxis->setDateTimeFormat("MM-dd");
    // 設置一個更緊湊的字體大小爲底部和左軸刻度標籤:
    ui->widget->xAxis->setTickLabelFont(QFont(QFont().family(), 8));
    ui->widget->yAxis->setTickLabelFont(QFont(QFont().family(), 8));
    // 設置一天爲固定的一個刻度
    ui->widget->xAxis->setAutoTickStep(false);
    ui->widget->xAxis->setTickStep(3600*24); // 一天的秒數
    ui->widget->xAxis->setSubTickCount(9);//一個大刻度包含4個小刻度
    // 設置軸標籤
    ui->widget->xAxis->setLabel("時間(h)");
    ui->widget->yAxis->setLabel("體溫(℃)");
    // 設置上邊和右邊軸沒有刻度和標籤
    ui->widget->xAxis2->setVisible(true);
    ui->widget->yAxis2->setVisible(true);//座標軸是否可見
    ui->widget->xAxis2->setTicks(false);//刻度是否可見
    ui->widget->yAxis2->setTicks(false);
    ui->widget->xAxis2->setTickLabels(false);//軸標籤是否可見
    ui->widget->yAxis2->setTickLabels(false);
    // 設置軸範圍和顯示全部數據
    ui->widget->xAxis->setRange(time[0],time[0]+24*3600*7);
    ui->widget->yAxis->setRange(30, 45);
    // 顯示圖例
    ui->widget->graph(0)->setName("心率");
    ui->widget->graph(1)->setName("具體數值");  
    ui->widget->legend->setVisible(true);
}

6.現在我們在mainwindow中添加我們要顯示的數據,代碼如:

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    setWindowTitle("一週體溫表");//  設置標題  
    QString results = "2016-06-01 08:00:00#36#"
                      "2016-06-01 12:00:00#37#2016-06-01 18:00:00#37#"
                      "2016-06-02 08:00:00#36#2016-06-02 12:00:00#37#"
                      "2016-06-02 18:00:00#37#2016-06-03 08:00:00#36#"
                      "2016-06-03 12:00:00#35#2016-06-03 18:00:00#37#"
                      "2016-06-04 08:00:00#36#2016-06-04 12:00:00#37#"
                      "2016-06-04 18:00:00#37#2016-06-05 08:00:00#36#"
                      "2016-06-05 12:00:00#37#2016-06-05 18:00:00#36#"
                      "2016-06-06 08:00:00#37#2016-06-06 12:00:00#36#"
                      "2016-06-06 18:00:00#37#2016-06-07 08:00:00#37#"
                      "2016-06-07 12:00:00#37#2016-06-07 18:00:00#36#";
    GraphDemo(results);//調用我們寫的函並且將數據傳給這個函數

7.現在我們運行下這個函數,效果如下圖所示
這裏寫圖片描述
現在這個例程到此結束。

其他的類型的圖表,我們可以參考QCustomPlot自帶的例程,裏面有很多個例程,另附官方下載地址http://www.qcustomplot.com/index.php/download

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章