QChart雙Y軸，X軸設置時間軸

前言

工作上需要做一個雙Y軸的折線圖，除了看QT的相關類的文檔，找到的資料不多，所以記錄下來。

準備

首先，通過QT的幫助文檔了解下QChart、QSplineSeries(或者其他的Series類)、QValueAxis等類的描述，翻譯用的是有道的在線翻譯，自己再稍微修改一下不通順的地方。

QChart

The QChart class manages the graphical representation of the chart's series, legends, and axes.

QChart類管理圖表中的線、圖例和軸的圖形表示。

QChart is a QGraphicsWidget that you can show in a QGraphicsScene. It manages the graphical representation of different types of series and other chart related objects like legend and axes. To simply show a chart in a layout, the convenience class QChartView can be used instead of QChart. In addition, line, spline, area, and scatter series can be presented as polar charts by using the QPolarChart class.

QChart是一個可以在QGraphicsScene中顯示的QGraphicsWidget。它管理不同類型的系列和其他圖表相關對象(如圖例和軸)的圖形表示。要簡單地在布局中顯示圖表，可以使用便利類QChartView代替QChart。此外，直線、平滑曲線、面積和散射圖可以通過QPolarChart類來表示為極坐標圖。

QSplineSeries

The QSplineSeries class presents data as spline charts.

QSplineSeries類將數據表示為平滑曲線圖。

A spline series stores the data points and the segment control points needed by QPainterPath to draw a spline. The control points are automatically calculated when the data changes. The algorithm computes the points so that the normal spline can be drawn.

一個spline series存儲QPainterPath繪制平滑曲線所需的數據點和段控制點。當數據發生變化時，控制點會自動計算。該算法對點進行計算，以便繪制平滑曲線。

QValueAxis

QValueAxis class adds values to a chart's axes.

QValueAxis類將值添加到圖表的軸中。

A value axis can be set up to show an axis line with tick marks, grid lines, and shades. The values on the axis are drawn at the positions of tick marks.

可以設置一個值軸來顯示帶有標記、網格線和陰影的軸線。在軸上的值是在標記的位置繪制的。

QDateTimeAxis

The QDateTimeAxis class adds dates and times to a chart's axis.

QDateTimeAxis類將日期和時間添加到圖表的軸中。

QDateTimeAxis can be set up to show an axis line with tick marks, grid lines, and shades. The labels can be configured by setting an appropriate DateTime format. QDateTimeAxis works correctly with dates from 4714 BCE to 287396 CE. For other limitiations related to QDateTime, see QDateTime documentation.

可以設置QDateTimeAxis來顯示帶有標記標記、網格線和陰影的軸線。可以通過設置適當的DateTime格式來配置軸線上顯示的值。QDateTimeAxis可以表示公元前4714年到公元287396年之間的時間。關于其他與QDateTime相關的信息，請參閱QDateTime文檔。

Note : QDateTimeAxis is disabled on platforms that define qreal as float.

注意 :在將qreal定義為float的平臺上禁用QDateTimeAxis。

關于設置雙Y軸的比較重要的的函數是QChart的 addSeries，addAxis這兩個函數，前者是添加線到QChart中，后者是添加坐標軸到指定的位置。還有QSplineSeries的attachAxis函數。QT文檔中的描述如下：

void QChart::addSeries(QAbstractSeries *series)

Adds the series series to the chart and takes ownership of it.

將series添加到chart中，并且chart獲得series的所有權，即chart成為series的parent。

Note : A newly added series is not attached to any axes by default, not even those that might have been created for the chart using createDefaultAxes() before the series was added to the chart. If no axes are attached to the newly added series before the chart is shown, the series will get drawn as if it had axes with ranges that exactly fit the series to the plot area of the chart. This can be confusing if the same chart also displays other series that have properly attached axes, so always make sure you either call createDefaultAxes() after a series has been added or explicitly attach axes for the series.

注意 : 默認情況下，新添加的series不會附加到任何軸上，即使是那些在series添加到圖表之前使用chart的createDefaultAxes()函數為圖表創建的軸。如果在顯示圖表之前沒有附加任何坐標軸到新添加的series上，那么這個數列就會被繪制出來，就好像它的坐標軸的范圍恰好與這個series對應于圖表的繪圖區域一樣。如果同一個圖表還顯示了其他附加了軸的series，那么這可能會繪制出令人困惑畫面，所以一定要確保在添加了series之后再調用createDefaultAxes()，或者顯式地為該series附加軸。

void QChart::addAxis(QAbstractAxis *axis, Qt::Alignment alignment)

Adds the axis axis to the chart aligned as specified by alignment. The chart takes the ownership of the axis.

將坐標軸添加到圖表中的指定的位置(左邊，下方，右邊，上方)。這個chart獲得坐標軸的所有權。

bool QAbstractSeries::attachAxis(QAbstractAxis *axis)

Attaches the axis specified by axis to the series.

將指定的坐標軸附加給series。

Returns true if the axis was attached successfully, false otherwise.

如果成功，返回true，否則，返回false

Note : If multiple axes of the same orientation are attached to the same series, they will have the same minimum and maximum values.

注意 :如果同一系列上有多個相同方向的軸，它們的最小值和最大值是相同的。

編碼實現

接下來開始寫代碼，打開QT，我的是QT5.11，新建工程，在.pro文件里增加

QT+=charts

在源文件里添加QChart的頭文件

#include

#include

在.cpp文件里增加命名空間

QT_CHARTS_USE_NAMESPACE

//或者 using namespace QtCharts;

然后在QT設計師里往窗口添加一個Graphics View，然后提升為QChartView，

提升Graphics View

然后是編輯源文件，這里我就直接上代碼了，代碼里寫有注釋。

mainwindow.h文件

#ifndef MAINWINDOW_H

#define MAINWINDOW_H

#include

#include

#include

#include

?

?

namespaceUi{

classMainWindow;

}

?

classMainWindow:publicQMainWindow

{

Q_OBJECT

?

public:

explicitMainWindow(QWidget*parent=0);

~MainWindow();

?

/*menbers**************************************************************************************/

//聲明QChart的實例，QSplineSeries的實例

QChart*chart;

QSplineSeries*series1;

QSplineSeries*series2;

//聲明timer

QTimer*timer;

?

/*funcions **************************************************************************************/

//聲明劃線的函數和初始化QChart的函數

voiddrawLine();

voidinitChart();

?

publicslots:

/*slot function**********************************************************************************/

//聲明timer的槽函數

voidtimerDeal();

?

private:

Ui::MainWindow*ui;

};

?

#endif // MAINWINDOW_H

?mainwindow.cpp文件

#include "mainwindow.h"

#include "ui_mainwindow.h"

#include

#include

?

?

QT_CHARTS_USE_NAMESPACE

MainWindow::MainWindow(QWidget*parent) :

QMainWindow(parent),

ui(newUi::MainWindow)

{

ui->setupUi(this);

//初始化QChart

initChart();

?

//設置timer，槽連接到

timer=newQTimer();

timer->setInterval(400);

connect(timer,SIGNAL(timeout()),this,SLOT(timerDeal()));

timer->start();

}

?

MainWindow::~MainWindow()

{

deleteui;

}

?

//實現QChart的初始化函數

voidMainWindow::initChart()

{

//初始化QChart的實例

chart=newQChart();

?

//初始化兩個QSplineSeries的實例

series1=newQSplineSeries();

series2=newQSplineSeries();

//設置兩條曲線的名稱

series1->setName("series1");

series2->setName("series2");

?

//把曲線添加到QChart的實例chart中

chart->addSeries(series1);

chart->addSeries(series2);

?

//聲明并初始化X軸、兩個Y軸

QDateTimeAxis*axisX=newQDateTimeAxis();

// QValueAxis *axisX = new QValueAxis();

QValueAxis*axisY_1=newQValueAxis();

QValueAxis*axisY_2=newQValueAxis();

//設置坐標軸顯示的范圍

axisX->setMin(QDateTime::currentDateTime().addSecs(-60*1));

axisX->setMax(QDateTime::currentDateTime().addSecs(0));

axisY_1->setMin(0);

axisY_1->setMax(18);

axisY_2->setMin(0);

axisY_2->setMax(18);

?

//設置坐標軸上的格點

axisY_1->setTickCount(7);

axisY_2->setTickCount(11);

//設置坐標軸顯示的名稱

axisX->setTitleText("X軸");

axisY_1->setTitleText("axisY_1-series1");

axisY_2->setTitleText("axisY_2-series2");

//設置坐標軸的顏色，粗細，設置網格不顯示

axisY_1->setLinePenColor(QColor(Qt::darkBlue));

axisY_1->setGridLineColor(QColor(Qt::darkBlue));

axisY_2->setLinePenColor(QColor(Qt::darkGreen));

axisY_2->setGridLineColor(QColor(Qt::darkGreen));

axisY_1->setGridLineVisible(false);

axisY_2->setGridLineVisible(false);

QPenpenY1(Qt::darkBlue,3,Qt::SolidLine,Qt::RoundCap,Qt::RoundJoin);

QPenpenY2(Qt::darkGreen,3,Qt::SolidLine,Qt::RoundCap,Qt::RoundJoin);

axisY_1->setLinePen(penY1);

axisY_2->setLinePen(penY2);

?

//把坐標軸添加到chart中，

//addAxis函數的第二個參數是設置坐標軸的位置，

//只有四個選項，下方：Qt::AlignBottom，左邊：Qt::AlignLeft，右邊：Qt::AlignRight，上方：Qt::AlignTop

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

chart->addAxis(axisY_1,Qt::AlignLeft);

chart->addAxis(axisY_2,Qt::AlignRight);

?

//把曲線關聯到坐標軸

series1->attachAxis(axisX);

series1->attachAxis(axisY_1);

series2->attachAxis(axisX);

series2->attachAxis(axisY_2);

?

//把chart顯示到窗口上

ui->graphicsView->setChart(chart);

?

}

?

//實現畫線函數，動態更新

voidMainWindow::drawLine()

{

//每增加一個點改變X軸的范圍，實現曲線的動態更新效果

QDateTimebjtime=QDateTime::currentDateTime();

qsrand(QTime(0,0,0).secsTo(QTime::currentTime()));

chart->axisX()->setMin(QDateTime::currentDateTime().addSecs(-60*1));

chart->axisX()->setMax(QDateTime::currentDateTime().addSecs(0));

?

//當曲線上最早的點超出X軸的范圍時，剔除最早的點，

if(series1->count()>119)

{

series1->removePoints(0,series1->count()-119);

}

if(series2->count()>119)

{

series2->removePoints(0,series2->count()-119);

}

?

intY1=qrand()%9;//隨機生成0到9的隨機數

intY2=9+qrand()%9;//隨機生成9到18的隨機數

//增加新的點到曲線末端

series1->append(bjtime.toMSecsSinceEpoch(),Y1);

series2->append(bjtime.toMSecsSinceEpoch(),Y2);

?

}

//實現timer的槽函數

voidMainWindow::timerDeal()

{

//定時畫曲線

drawLine();

}

?最終效果，曲線和X軸的范圍隨著時間實時更新。

最終效果

總結

了解了以后，就覺得實現這個效果并不難，關鍵函數就那幾個。雖說不難，也算是解決了一個問題，獲得了成長。

聲明

本文中的代碼均為本人所寫，本文亦是本人原創，轉載請注明出處。

總結

以上是生活随笔為你收集整理的qchart 图表_QChart双Y轴实时更新曲线图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。