Qt/C++ – Урок 031. QCustomPlot – Побудова діаграм з часом

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

Бібліотека QCustomPlot має можливість побудови графіків за шкалою часу, що зручно під час аналізу даних, що змінюються у часі. Для цього необхідно встановити тип підпису до Осі Часу як QCPAxis::ltDateTime. І після цього виставити формат дати та часу. Тобто є можливість відображати на Осі або дату, або час, або одночасно і те й інше, залежно від того, яке форматування Ви задасте. Правила форматування для QCustomPlot використовуються ті самі, що й для класів QDateTime, QDate, QTime.

Координата часу передається у вигляді числа типу double , яке починає відлік у секундах від часу 1970-01-01T00:00:00 . Що необхідно враховувати під час побудови графіка.

Пропоную написати додаток, який будуватиме псевдовипадковий графік доходу та рублях залежно від поточної координати часу. При цьому з графіком можна буде взаємодіяти, тобто наближати і видаляти його, а також пересувати, але тільки горизонтальною Осі. Тобто за висотою відображення графіка не змінюватиметься. Також зробимо можливість зміни формату координат часу залежно видимої області графіка по Осі Часу. Тобто, якщо видно частину графіка менше, ніж за один день, то по осі часу формат підписів буде наступним: hh:mm . В іншому випадку формат буде "dd MMM yy" .

Будуємо Графік

Створюємо проект і підключаємо до нього бібліотеку QCustomPlot. Модифікації будуть піддаватися лише файли mainwindow.h та mainwindow.cpp. Нові файли не додаватимуться.

mainwindow.h

Оголошуємо екземпляр класу QCustomPlot, , а також екземпляр самого графіка. І оголосимо СЛОТ, в який передаватиметься сигнал про зміну області відображення по Осі Часу.

#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, як і було задумано в даному прикладі.

Демонстрацію роботи програми Ви можете побачити у відеоуроці.

Архів з проектом

Відеоурок