windows 任務管理器--動態圖的生成

 接下來面臨的問題:

1) CPU 內存 使用情況的圖示化動態顯示

2) 該種動態圖示化信息添加到 listwidget中的方法。

目錄

1.chart模塊的使用

目錄

1.chart模塊的使用

1.1 採用控件graphic view

1.2  提升Graphic view爲類QChartView

1.3 工程文件和源碼文件增加相關配置

1.4 代碼實戰

   原理分析

1) 首先構造最小的數據,比如Series(即上圖右側的Series數據),實例

2)創建數據的容器QChart的實例,即上圖右側部分

3) 將數據和view進行關聯

官網資料


 

1.chart模塊的使用

1.1 採用控件graphic view

在designer的界面窗體中,拖入一個 graphic view,作爲chart的顯示控件。

 

1.2  提升Graphic view爲類QChartView

右擊 graphic view控件,選擇 “提升爲”,將QGraphicsView 提升爲QChartView,這樣後續可以使用QChartView中的類和方法對 graphic view控件進行操作了。

此處的名稱 QChartView 是固定的,不要隨便填寫。

實際上qchartview.h這個文件在QT的安裝目錄,例如我的在此目錄下(前提你在安裝QT時選擇了QChart 模塊):

1.3 工程文件和源碼文件增加相關配置

 1)在工程的pro配置文件中,增加,以便工程可以引用相關的模塊及頭文件,否則會出現qchartview.h找不到的編譯錯誤。

   QT += core gui

    QT += charts

2) 在窗體對應的頭文件中(例如我的窗體爲cfg.ui,對應的頭文件爲ui_cfg.h)增加

#include <QtCharts>
using namespace QtCharts;

由於剛纔已經將graphic view提升爲QChartView,因而在窗體的類定義中會使用類QChartView,不包含上面兩行會報錯。

graphicsView = new QChartView(page);  //提升後graphicsView的實例有類QChartView實現了

本質上,要保證工程中的源文件在引用QChartView的實例時要找到相關的接口聲明,因而上述兩行不一定放到ui_cfg.h中。例如

在我的工程中,我放到cfg.h的頭文件中,

而在cfg.cpp中,其頭文件的順序是這樣的,這就保證了ui_cfg.h中隊QChartView引用時,可以找到相關類及接口

1.4 代碼實戰

   原理分析

   在進行代碼之前,先了解相關類之間的關係。QT使用了經典的model-view模式,而在Qchart中亦是如此。兩個主要類的關係爲

其中QchartView負責顯示,而Qchart則負責數據部分,具體的數據由座標系、點座標等構成。

瞭解基本的結構,那我們

1) 首先構造最小的數據,比如Series(即上圖右側的Series數據),實例

  QLineSeries* line1 = new QLineSeries();// 創建線的實例

  line1->append(1,2);  //添加數據。3個點的座標
  line1->append(2,4);
  line1->append(3,2);

2)創建數據的容器QChart的實例,即上圖右側部分

  

QChart* c = new QChart();  //創建數據model的實例
c->addSeries(line1);    // 添加具體的數據,此處添加一根線的數據

3) 將數據和view進行關聯

  ui->graphicsView->setChart(c);

graphicsView在上面通過designer進行設計,並進行類的提升後已經創建。此處將model Qchart中的數據給它,View就可以顯示出需要的數據了。

  效果圖:

 

資料搜索

1)  官網資料 C:\Qt\Qt5.13.2\Examples\Qt-5.13.2\charts\dynamicspline  參考例子

2) https://blog.csdn.net/LKZYnih/article/details/81915436  介紹了初級應用

 

官網資料

https://doc.qt.io/qt-5/qtcharts-module.html  介紹了各個chart類和基本的配置

https://doc.qt.io/qt-5/qtcharts-overview.html  各種chart的使用示例

https://doc.qt.io/qt-5/qchart.html     QChart類的定義。

https://doc.qt.io/qt-5/qchartview.html  QChartView類的定義

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章