Qt/C++ - Урок 031. QCustomPlot - строим график по времени

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

Библиотека 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, как и было задумано в данном примере.

Демонстрацию работы приложения Вы можете увидеть в видеоуроке.

Архив с проектом

Видеоурок

Комментарии

17 апреля 2017 г. 19:52

Попробовал собрать этот проект, но у меня ошибка ASSERT failure in QVector ::operator[]: "index out of range", file C:\Qt\Qt5.5.1\5.5\mingw492_32\include/QtCore/qvector.h, line 401

17 апреля 2017 г. 20:55

Как правильно вытащить данные из БД, если есть два поля с int и timestamp и вставить в graphic->setData(time, income); // Устанавливаем данные ?

18 апреля 2017 г. 5:30

В Дебаг режиме собирали? Кажется он в дебаге выкидывает ассерт из-за вот этой строки:

income[i] = qFabs(income[i-1]) + (i/50.0+1)*(rand()/(double)RAND_MAX-0.5);

Попробуйте переписать немного иначе:

    for (int i=1; i<400; ++i)
      {
        time[i-1] = now + 3600*i;
        income[i-1] = qFabs(income[i-1]) + (i/50.0+1)*(rand()/(double)RAND_MAX-0.5);
      }
18 апреля 2017 г. 5:33

Вытаскивать нужно обычным QSqlQuery

QSqlQuery query;
query.exec("SELECT column1, cilumn2 FROM table;");

Получите список записей и методами first(), next(), previous(), last() уже пройтись по этому списку, устанавливая данный в график.

20 апреля 2017 г. 5:52

Спасибо. Подскажите еще пожалуйста. У меня есть таблица с доходами.

`id_cash` int(11) NOT NULL, 
`date_cash` date NOT NULL, 
`appointment_cash` int(11) NOT NULL, 
`operation_cash` int(11) NOT NULL, 
`total_cash` int(11) NOT NULL, 
`note_cash` int(11) NOT NULL, 
`documents_cash` int(11) NOT NULL, 
`non_cash` int(11) NOT NULL
Как мне вывести сумму по дням в график?
20 апреля 2017 г. 6:54

total_cash - это сумма за определённую дату, так?

Тогда запрос должен выглядеть примерно так:

SELECT SUM(total_cash) FROM cash_table WHERE date_cash BETWEEN "2017-04-01" AND "2017-04-20" GROUP BY  date_cash

Этот запрос используете с QSqlQuery и в цикле while добавляете данные в график. что-то вроде такого должно получиться:

QSqlQuery query;
query.exec("SELECT SUM(total_cash) FROM cash_table WHERE date_cash BETWEEN "2017-04-01" AND "2017-04-20" GROUP BY  date_cash;)");
while (query.next()) {
    double total_for_day = query.value(0).toDouble();
    // Todo Something
}
20 апреля 2017 г. 8:02

При построении графика используются два параметра, время и доход. Как сопоставить дату с доходом за день?

20 апреля 2017 г. 8:18

Ну а подумать? ))

SELECT date_cash, SUM(total_cash) FROM cash_table WHERE date_cash BETWEEN "2017-04-01" AND "2017-04-20" GROUP BY  date_cash;
20 апреля 2017 г. 16:19

У меня тип данных в поле data_time стоял timestamp, поставил тип data и все ок. Спасибо.

20 апреля 2017 г. 19:30

Проблема с value("date_cash").toDate(); не могу передать в graphic->setData().

21 апреля 2017 г. 3:54
QCPGraph принимает значения времени в типе double, посмотрите внимательно статью, как там инициализируются переменные времени, когда они передаются в график. В статье также про это во втором абзаце сказано.
21 апреля 2017 г. 4:17

Прочитал. Вроде со все разобрался. Спасибо.

20 октября 2017 г. 14:04

не могли бы вы выложить архив с рабочей версией скрипта?

20 октября 2017 г. 14:06

После работы поищу, должен где-то быть на винте.

20 октября 2017 г. 21:06

Добавил архив с проектом

23 октября 2017 г. 8:44

При компиляции выдает ошибку https://cloud.mail.ru/public/FUxM/b4NFJCb9w

23 октября 2017 г. 9:00

Мне эта ошибка ни о чём не говорит. Вообще ошибка пишет про RunTime, а ен при компиляцию. При запуске была ошибка.
Там для получения рандомных значений использует выход в неиницализированную область памяти, может из-за этот. Запустите в Release сборке.

23 октября 2017 г. 14:02

В режиме выпуск работает

23 октября 2017 г. 14:10

Хорошо. Там в дебаг режиме просто отслеживаются выходы за пределы массива, за счёт чего получается рандомное первоначальное значение. Для примера этого достаточно.

Ну а в своём проекте вам этого не понадобится, когда напишите свою логику построения графика. Поэтому будет работать в Debug режиме с вашей логикой, если только сами ошибок не наделаете.
24 октября 2017 г. 7:53

Скажите пожалуйста, как сделать так, что бы при перетаскивании графика, график достраивался? Пока Строиться только то, что попало в окно.

24 октября 2017 г. 7:57

Я давно уже не работал с QCustomPlot, может создадите тему на форуме и приложите свой архив с проектом ? Надо смотреть по факту, что вы сделали.

1 ноября 2017 г. 13:00

Скажите пожалуйста, что такое  gridLayout ? В аналогичном проекте выдает ошибку Ui::MainWindow' has no member named 'gridLayout'

1 ноября 2017 г. 20:29

Это объект компоновщика QGridLayout. Данная ошибка говорит о том, что данный объект не был добавлен через графический дизайнер в окно MainWindow

Комментарии

Только авторизованные пользователи могут оставлять комментарии.
Пожалуйста, Авторизуйтесь или Зарегистрируйтесь
22 февраля 2018 г. 18:58
Oleg_kgd

C++ - Тест 001. Первая программа и типы данных

  • Результат 66 баллов
  • Очки рейтинга -1
21 февраля 2018 г. 19:18
sentinel

Qt - Тест 001. Сигналы и слоты

  • Результат 78 баллов
  • Очки рейтинга 2
21 февраля 2018 г. 11:32
barilla

C++ - Тест 006. Перечисления

  • Результат 0 баллов
  • Очки рейтинга -10
Последние комментарии
22 февраля 2018 г. 16:42
soz7557

Qt/C++ - Урок 029. Изображение в базе данных в Qt – Сохранение и Восстановление

Hi, could you please show how to delete file from image Blob?  also if the same image exist in Blob then don't over write..

21 февраля 2018 г. 8:37
EVILEG

Qt/C++ - Урок 027. Полиморфизм в Qt на примере геометрических фигур в QGraphicsScene

Добрый день! 1) Эллипс можно реализовать так void Ellipse::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget){ painter->setPen(QPen(...

20 февраля 2018 г. 22:10
Log159

Qt/C++ - Урок 027. Полиморфизм в Qt на примере геометрических фигур в QGraphicsScene

Здравствуйте! В программировании новичок и есть пара вопросов. Буду очень благодарен за ответ. Не совсем понимаю как: 1) реализовать подобным образом рисование эллипса(конкре...

18 февраля 2018 г. 14:42
EVILEG

QML - Урок 019. Navigation Drawer в Qt Qml Android

Да, теперь представляю, как то работает. Согласен, ваша правка определённо к месту здесь.

Сейчас обсуждают на форуме
21 февраля 2018 г. 22:19
vitaliy_antipov

Проблема с ComboBox

Спасибо за ответы, есть над чем подумать

21 февраля 2018 г. 13:26
sol11

Qtableviev после сортировки

Спасибо, всё заработало :) Единственное вот тут row на id поменял и всё круто :)) if(id == -1){ model->insertRow(model->rowCount(QModelIndex())); map...

20 февраля 2018 г. 13:18
alex_lip

Разбить один qml файл на несколько составляющих

Да спасибо. Просто после необходимости специфичных названий для файла - стараюсь обращать внимание на любую мелочь.

20 февраля 2018 г. 8:13
EVILEG

Передача файлов в django минуя временные папки django и nginx

Тогда я даже и не знаю, прошерстил документацию, но там нет информармации о возможности отключения сохранения временных файлов. Как я понял временные файлы используются, когда тело запро...

18 февраля 2018 г. 12:34
EVILEG

QGraphicsView

Добрый день!QGraphicsView - это виджет, а значит, что в качестве парента для него выступает QWidget, а не QObject.То есть из ошибок, которые сразу бросаются в глаза в этом коде, здесь прису...