Qt/C++ - Lektion 031. QCustomPlot – Der Aufbau von Diagrammen mit der Zeit

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

Die Bibliothek QCustomPlot bietet die Möglichkeit, Diagramme auf einer Zeitskala zu zeichnen, was bei der Analyse von Daten nützlich ist, die sich im Laufe der Zeit ändern. Dazu müssen Sie den Signaturtyp auf der Zeitachse als QCPAxis :: ltDateTime einstellen und dann das Datums- und Zeitformat einstellen. Das heißt, es ist möglich, auf der Achse entweder das Datum oder die Uhrzeit oder beides gleichzeitig anzuzeigen, je nachdem, welche Formatierung Sie angeben. Formatierungsregeln für QCustomPlot sind dieselben wie für QDateTime, QDate, QTime.

Die Zeitkoordinate wird als Doppelzahl übergeben, die ab der Uhrzeit 1970-01-01T00:00:00 in Sekunden zu zählen beginnt. Dinge, die Sie beim Erstellen eines Diagramms beachten sollten.

Ich schlage vor, eine Anwendung zu schreiben, die abhängig von der aktuellen Zeitkoordinate einen pseudozufälligen Graphen von Einkommen und Rubel erstellt. In diesem Fall ist es möglich, mit dem Graphen zu interagieren, d. h. hinein- und herauszuzoomen sowie ihn zu verschieben, jedoch nur entlang der horizontalen Achse. Das heißt, die Grafikanzeige ändert sich nicht in der Höhe. Wir werden es auch ermöglichen, das Format der Zeitkoordinaten abhängig vom sichtbaren Bereich des Diagramms entlang der Zeitachse zu ändern. Das heißt, wenn ein Teil des Diagramms in weniger als einem Tag sichtbar ist, haben die Beschriftungen entlang der Zeitachse das folgende Format: hh: mm . Andernfalls ist das Format "dd MMM yy" .

Erstellen Sie ein Diagramm

Erstellen Sie ein Projekt und verbinden Sie die QCustomPlot-Bibliothek damit. Nur mainwindow.h und mainwindow.cpp-Dateien werden geändert. Neue Dateien werden nicht hinzugefügt.

mainwindow.h

Wir deklarieren eine Instanz der Klasse QCustomPlot sowie eine Instanz des Diagramms selbst. Und wir werden einen SLOT deklarieren, an den das Signal über die Änderung des Anzeigebereichs entlang der Zeitachse gesendet wird.

#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");
}

Ergebnis

Als Ergebnis sollten Sie ein Diagramm ähnlich dem in der folgenden Abbildung gezeigten haben. Beachten Sie, dass sich beim Scrollen des Mausrads und Bewegen des Graphen mit der Maus der Graph selbst nur entlang der X-Achse ändert, wie es in diesem Beispiel beabsichtigt war.

Eine Demonstration der Anwendung können Sie im Video-Tutorial sehen.

Archiv mit dem Projekt

Videoanleitung