學習Qt Charts - Qt Charts的坐標軸

這次來學學Qt chart 的坐標軸

有這么一組數據：

這是深圳市2019年6月份的天氣預報（來自中國天氣網：深圳），里面有每天的最高溫度，把這最高溫度做成個數組，如下：

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];

按照之前的筆記，建立一個可以用Qt Chart的工程，並把上面的數據用折線圖顯示出來，代碼如下：

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

顯示結果為：

上圖中只能看想到一條折線，此外看不出任何信息，不知道這個圖標表示的是什么數據，數據范圍是什么，

現在來給圖表加上坐標軸，讓圖表表示的數據有意義

1. 使用QChart API 添加默認的坐標軸

QChart類有個API：

void QChart::createDefaultAxes()

可以根據QChart中已有的圖表創建坐標軸，在程序中調用該函數，代碼為：

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

顯示結果為：

2. 手動添加坐標軸

首先使用QValueAxis來創建坐標軸，如下:

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

上面代碼中：

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

是用來創建坐標軸的，這里創建2個坐標軸，然后把X軸添加到圖表的底部，Y軸添加到圖表的左邊：

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

然后設置坐標軸的范圍，由於有30個數據，所以把X軸設置為0-30，要顯示的數據最大值為33，最小值為30，這里把Y軸設置為29-34，然后跟temp_max_series關聯起來：

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

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

最后顯示結果如下：

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