Learning the coordinate axes of Qt Charts

This time, let's learn about the coordinate axes of Qt chart

There is such a set of data:

 

This is the weather forecast of xx city (from China Weather Network: Shenzhen), which contains the highest temperature every day. Make the highest temperature into an array, as follows:

The benefits of this article, the fee to receive Qt development learning materials package, technical video, including (C++ language foundation, C++ design pattern, introduction to Qt programming, QT signal and slot mechanism, QT interface development-image drawing, QT network, QT database programming, QT project combat, QSS, OpenCV, Quick module, interview questions, etc. )

int daily_temp_max[30] = [32,
        31,30,30,31,32,32,32,
        32,32,32,31,31,31,31,
        30,30,31,32,32,33,33,
        30,30,30,30,31,31,31,
        33];

According to the previous notes, build a project that can use Qt Chart, and display the above data in a line chart, the code is as follows:

Dialog::Dialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::Dialog)
{
    ui->setupUi(this);

    int daily_temp_max[30] = {32,
            31,30,30,31,32,32,32,
            32,32,32,31,31,31,31,
            30,30,31,32,32,33,33,
            30,30,30,30,31,31,31,
            33};

    QLineSeries* temp_max_series = new QLineSeries();

    for(int i=0;i<30;i++)
        temp_max_series->append(i,daily_temp_max[i]);

    chart = new QChart();
    chart->addSeries(temp_max_series);

    ChartView = new QChartView(this);
    ChartView->setChart(chart);
    ui->containfer->addWidget(ChartView);
}

The displayed result is:

 

In the picture above, only a broken line can be seen, and no other information can be seen. I don’t know what data this icon represents and what the data range is.

Now let's add axes to the chart to make the data represented by the chart meaningful

1. Use QChart API to add default coordinate axes

The QChart class has an API:

void QChart::createDefaultAxes()

You can create coordinate axes based on existing charts in QChart, and call this function in the program. The code is:

Dialog::Dialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::Dialog)
{
    ui->setupUi(this);
    int daily_temp_max[30] = {32,
            31,30,30,31,32,32,32,
            32,32,32,31,31,31,31,
            30,30,31,32,32,33,33,
            30,30,30,30,31,31,31,
            33};

    QLineSeries* temp_max_series = new QLineSeries();

    for(int i=0;i<30;i++)
        temp_max_series->append(i,daily_temp_max[i]);

    chart = new QChart();
    chart->addSeries(temp_max_series);

    chart->createDefaultAxes();
    ChartView = new QChartView(this);
    ChartView->setChart(chart);
    ui->verticalLayout->addWidget(ChartView);
}

The displayed result is:

 

2. Manually add coordinate axes

First use QValueAxis to create the coordinate axis, as follows:

 Dialog::Dialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::Dialog)
{
    ui->setupUi(this);
    int daily_temp_max[30] = {32,
            31,30,30,31,32,32,32,
            32,32,32,31,31,31,31,
            30,30,31,32,32,33,33,
            30,30,30,30,31,31,31,
            33};

    QLineSeries* temp_max_series = new QLineSeries();

    for(int i=0;i<30;i++)
        temp_max_series->append(i,daily_temp_max[i]);


    chart = new QChart();
    chart->addSeries(temp_max_series);
    
    axisX = new QValueAxis();
    axisY = new QValueAxis();
    chart->addAxis(axisX,Qt::AlignBottom);
    chart->addAxis(axisY,Qt::AlignLeft);
    axisX->setRange(0, 30);
    axisY->setRange(28, 35);

    temp_max_series->attachAxis(axisX);
    temp_max_series->attachAxis(axisY);


    ChartView = new QChartView(this);
    ChartView->setChart(chart);
    ui->verticalLayout->addWidget(ChartView);
}

In the above code:

    axisX = new QValueAxis();
    axisY = new QValueAxis();

It is used to create coordinate axes, here create 2 coordinate axes, then add the X axis to the bottom of the chart, and the Y axis to the left of the chart:

    chart->addAxis(axisX,Qt::AlignBottom);
    chart->addAxis(axisY,Qt::AlignLeft);

Then set the range of the coordinate axis. Since there are 30 data, set the X axis to 0-30. The maximum value of the data to be displayed is 33, and the minimum value is 30. Here, set the Y axis to 29-34, and then associate it with temp_max_series:

    axisX->setRange(0, 30);
    axisY->setRange(29, 34);

    temp_max_series->attachAxis(axisX);
    temp_max_series->attachAxis(axisY);

The final display results are as follows:

 

3.datatime

Dialog::Dialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::Dialog)
{
    ui->setupUi(this);
    int daily_temp_max[30] = {32,
            31,30,30,31,32,32,32,
            32,32,32,31,31,31,31,
            30,30,31,32,32,33,33,
            30,30,30,30,31,31,31,
            33};

    QLineSeries* temp_max_series = new QLineSeries();
    QDateTime Time;
    for(int i=0;i<30;i++)
    {

         Time.setDate(QDate(2019, 6 , i+1));
        temp_max_series->append(Time.toMSecsSinceEpoch(),daily_temp_max[i]);
    }

    chart = new QChart();
    chart->addSeries(temp_max_series);

    QDateTimeAxis *axisX = new QDateTimeAxis;
    QDateTime TimeMin;
    QDateTime TimeMax;
    TimeMin.setDate(QDate(2019, 6 , 1));
    TimeMax.setDate(QDate(2019, 6 , 30));
    axisX->setRange(TimeMin,TimeMax);
    axisX->setTickCount(10);
    axisX->setFormat("yyyy/M/d");
    axisX->setTitleText("Date");

    chart->addAxis(axisX, Qt::AlignBottom);


    axisY = new QValueAxis();
    chart->addAxis(axisY,Qt::AlignLeft);
    axisY->setRange(29, 34);

    temp_max_series->attachAxis(axisX);
    temp_max_series->attachAxis(axisY);


    ChartView = new QChartView(this);
    ChartView->setChart(chart);
    ui->verticalLayout->addWidget(ChartView);
}

This article comes from the blog garden, author: Halin , please indicate the original link when reprinting: https://www.cnblogs.com/halin/p/14745317.html

The benefits of this article, the fee to receive Qt development learning materials package, technical video, including (C++ language foundation, C++ design pattern, introduction to Qt programming, QT signal and slot mechanism, QT interface development-image drawing, QT network, QT database programming, QT project combat, QSS, OpenCV, Quick module, interview questions, etc. )