Qt/C++ – 031-сабақ. QCustomPlot – уақыт бойынша сызба құру

график, QDateTime, Qt, время, QCustomPlot

[QCustomPlot] кітапханасының (https://evileg.com/post/94/) уақыт өте келе графиктерді салу мүмкіндігі бар, бұл уақыт өте өзгеретін деректерді талдау кезінде пайдалы. Ол үшін қолтаңба түрін Уақыт осіне QCPAxis::ltDateTime. ретінде орнату керек, содан кейін күн мен уақыт пішімін орнату керек. Яғни, қандай пішімдеуді көрсеткеніңізге байланысты Осьте күнді немесе уақытты немесе екеуін бір уақытта көрсетуге болады. QCustomPlot үшін пішімдеу ережелері QDateTime, QDate, QTime. сыныптарымен бірдей.

Уақыт координаты 1970-01-01T00:00:00 уақыттан бастап секундтармен есептеле бастайтын қос түрінің саны ретінде беріледі. Графикті салғанда нені ескеру керек.

Мен ағымдағы уақыт координатасына байланысты кіріс пен рубльдің жалған кездейсоқ графигін құрайтын қосымшаны жазуды ұсынамын. Сонымен қатар, диаграммамен өзара әрекеттесу, яғни үлкейту және кішірейту, сонымен қатар оны тек көлденең ось бойымен жылжыту мүмкін болады. Яғни, графиктің дисплейі биіктікте өзгермейді. Біз сонымен қатар уақыт осі бойынша диаграмманың көрінетін аймағына байланысты уақыт координатының пішімін өзгертуге мүмкіндік береміз. Яғни, диаграмманың бір бөлігі бір күннен аз уақыт көрінетін болса, онда уақыт осі бойындағы белгі пішімі келесідей болады: сағ:мм . Әйтпесе, пішім "dd MMM yy" болады.

График құру

Біз жоба жасаймыз және оған QCustomPlot кітапханасын қосамыз. Тек mainwindow.h және mainwindow.cpp. файлдары ғана өзгертіледі. Жаңа файлдар қосылмайды.

mainwindow.h

Біз QCustomPlot, класының данасын, сонымен қатар диаграмманың данасын жариялаймыз. Уақыт осі бойынша дисплей аймағын өзгерту туралы сигнал берілетін SLOT жариялайық.

#ifndef MAINWINDOW\_H
#define MAINWINDOW\_H

#include <QMainWindow>
#include "qcustomplot.h"

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q\_OBJECT

public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();

private:
    Ui::MainWindow *ui;
    QCustomPlot *customPlot;    // Объявляем графическое полотно
    QCPGraph *graphic;          // Объявляем график

private slots:
    void slotRangeChanged (const QCPRange &newRange);
};

#endif // MAINWINDOW\_H

mainwindow.cpp

#include "mainwindow.h"
#include "ui\_mainwindow.h"

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    customPlot = new QCustomPlot(); // Инициализируем графическое полотно
    ui->gridLayout->addWidget(customPlot,0,0,1,1);  // Устанавливаем customPlot в окно проложения

    customPlot->setInteraction(QCP::iRangeZoom,true);   // Включаем взаимодействие удаления/приближения
    customPlot->setInteraction(QCP::iRangeDrag, true);  // Включаем взаимодействие перетаскивания графика
    customPlot->axisRect()->setRangeDrag(Qt::Horizontal);   // Включаем перетаскивание только по горизонтальной оси
    customPlot->axisRect()->setRangeZoom(Qt::Horizontal);   // Включаем удаление/приближение только по горизонтальной оси
    customPlot->xAxis->setTickLabelType(QCPAxis::ltDateTime);   // Подпись координат по Оси X в качестве Даты и Времени
    customPlot->xAxis->setDateTimeFormat("hh:mm");  // Устанавливаем формат даты и времени

    // Настраиваем шрифт по осям координат
    customPlot->xAxis->setTickLabelFont(QFont(QFont().family(), 8));
    customPlot->yAxis->setTickLabelFont(QFont(QFont().family(), 8));

    // Автоматическое масштабирование тиков по Оси X
    customPlot->xAxis->setAutoTickStep(true);

    /* Делаем видимыми оси X и Y по верхней и правой границам графика,
     * но отключаем на них тики и подписи координат
     * */
    customPlot->xAxis2->setVisible(true);
    customPlot->yAxis2->setVisible(true);
    customPlot->xAxis2->setTicks(false);
    customPlot->yAxis2->setTicks(false);
    customPlot->xAxis2->setTickLabels(false);
    customPlot->yAxis2->setTickLabels(false);

    customPlot->yAxis->setTickLabelColor(QColor(Qt::red)); // Красный цвет подписей тиков по Оси Y
    customPlot->legend->setVisible(true);   //Включаем Легенду графика
    // Устанавливаем Легенду в левый верхний угол графика
    customPlot->axisRect()->insetLayout()->setInsetAlignment(0, Qt::AlignLeft|Qt::AlignTop);

    // Инициализируем график и привязываем его к Осям
    graphic = new QCPGraph(customPlot->xAxis, customPlot->yAxis);
    customPlot->addPlottable(graphic);  // Устанавливаем график на полотно
    graphic->setName("Доход, Р");       // Устанавливаем
    graphic->setPen(QPen(QColor(Qt::red))); // Устанавливаем цвет графика
    graphic->setAntialiased(false);         // Отключаем сглаживание, по умолчанию включено
    graphic->setLineStyle(QCPGraph::lsImpulse); // График в виде импульсных тиков

    /* Подключаем сигнал от Оси X об изменении видимого диапазона координат
     * к СЛОТу для переустановки формата времени оси.
     * */
    connect(customPlot->xAxis, SIGNAL(rangeChanged(QCPRange)),
            this, SLOT(slotRangeChanged(QCPRange)));

    // Будем строить график с сегодняшнего дни и текущей секунды в будущее
    double now = QDateTime::currentDateTime().toTime\_t();
    // Объявляем вектора времени и доходов
    QVector <double> time(400), income(400);

    srand(15); // Инициализируем генератор псевдослучайных чисел

    // Заполняем график значениями
    for (int i=0; i<400; ++i)
      {
        time[i] = now + 3600*i;
        income[i] = qFabs(income[i-1]) + (i/50.0+1)*(rand()/(double)RAND\_MAX-0.5);
      }

    graphic->setData(time, income); // Устанавливаем данные
    customPlot->rescaleAxes();      // Масштабируем график по данным
    customPlot->replot();           // Отрисовываем график
}

MainWindow::~MainWindow()
{
    delete ui;
}

void MainWindow::slotRangeChanged(const QCPRange &newRange)
{
    /* Если область видимости графика меньше одного дня,
     * то отображаем часы и минуты по Оси X,
     * в противном случае отображаем дату "День Месяц Год"
     * */
    customPlot->xAxis->setDateTimeFormat((newRange.size() <= 86400)? "hh:mm" : "dd MMM yy");
}

Барлығы

Нәтижесінде сіз келесі суретте көрсетілгенге ұқсас графикті алуыңыз керек. Тінтуір дөңгелегін жылжытқанда және диаграмманы тінтуірмен жылжытқанда, диаграмманың өзі осы мысалда айтылғандай тек X осі бойымен өзгеретінін ескертемін.

Қосымшаның демонстрациясын бейне оқулықтан көре аласыз.

Жоба мұрағаты

Бейне оқулық