QML- ChartView實現隨時間改變的趨勢曲線
阿新 • • 發佈：2020-07-14
前言
嘗試寫部落格的初衷：首先，記錄下自己的學習路程，方便以後回顧。其次，平常工作中，部落格園大佬的隨筆給了我非常大的幫助。自己也希望可以幫助到其他需要的人。為什麼先寫這個，網路上沒有具體實現的隨時間改變的趨勢曲線功能。
佈置介面元素
1 ChartView { 2 id:chartView 3 title: qsTr("①側溫度趨勢") 4 titleFont.pixelSize: 15 5 titleFont.bold: true 6 titleColor: Theme.darker(1.2)View Code7 width: parent.width 8 height:parent.height 9 antialiasing: true 10 //X軸 11 ValueAxis { 12 id: valueAxisX 13 min: 0 14 max: 60 15 tickCount: 30 //座標軸上的的刻度個數。所以間隔 = 60 / 30 = 2 16 labelFormat: "%.0f"//0 - 控制小數點後有幾位小數 17 } 18 //Y軸 19 ValueAxis { 20 id: valueAxisY 21 min: 20 22 max: 300 23 tickCount: 27 //座標軸上的的刻度個數 24 labelFormat: "%.1f"//1 - 控制小數點後有幾位小數 25 } 26 //LineSeries是折線，SplineSeries是曲線。子項都是XYPoint27 SplineSeries { 28 id:line1 29 name: "1" //線條的名稱 30 axisX: valueAxisX //指定X軸 31 axisY: valueAxisY //指定Y軸 32 color: Qt.darker("#BB4444",1.2) //線條顏色，預設每條線的顏色不同 33 width: 2//線的寬度，但修改線寬後，需要重新設定color，否則修改過width的線條都是黑色 34 } 35 SplineSeries { 36 id:line2 37 name: "2" 38 axisX: valueAxisX 39 axisY: valueAxisY 40 color: Qt.darker("#B38A4D",1.2) 41 width: 2 42 } 43 SplineSeries { 44 id:line3 45 name: "3" 46 //style: Qt.SolidLine //樣式 47 axisX: valueAxisX 48 axisY: valueAxisY 49 color: Qt.darker("#61B34D",1.2) 50 width: 2 51 } 52 SplineSeries { 53 id:line4 54 name: "4" 55 //style: Qt.SolidLine //樣式 56 axisX: valueAxisX 57 axisY: valueAxisY 58 color: Qt.darker("#4D8AB3",1.2) 59 width: 2 60 } 61 SplineSeries { 62 id:line5 63 name: "5" 64 //style: Qt.SolidLine //樣式 65 axisX: valueAxisX 66 axisY: valueAxisY 67 color: Qt.darker("#9E4DB3",1.2) 68 width: 2 69 } 70 SplineSeries { 71 id:line6 72 name: "6" 73 //style: Qt.SolidLine //樣式 74 axisX: valueAxisX 75 axisY: valueAxisY 76 color: Qt.darker("#AA5566",1.2) 77 width: 2 78 } 79 SplineSeries { 80 id:line7 81 name: "7" 82 //style: Qt.SolidLine //樣式 83 axisX: valueAxisX 84 axisY: valueAxisY 85 color: Qt.darker("#808080",1.2) 86 width: 2 87 } 88 SplineSeries { 89 id:line8 90 name: "8" 91 //style: Qt.SolidLine //樣式 92 axisX: valueAxisX 93 axisY: valueAxisY 94 color: Qt.darker("#F79709",1.2) 95 width: 2 96 } 97 }
現在顯示資料的容器已經制作好了，接下來考慮獲取資料的問題。為了演示效果，我採用了取一定範圍內的隨機數作為資料的來源。有了資料之後，我們該考慮怎麼把資料新增到曲線中去。定時器Timer控制著資料的插入速度（曲線的重新整理頻率）。這裡我們先以一條線為例，間隔1秒採集一個數據，滿10個點後，list清空重新新增。
第一階段效果
1 Timer{ 2 id:timer 3 property int count: 0 4 //生成隨機數(>=Min,<=Max) 5 function getRandomNum(Min,Max) 6 { 7 var Range = Max - Min; 8 var Rand = Math.random(); 9 return(Min + Math.round(Rand * Range)); 10 } 11 function timeChanged() { 12 //隨機數模擬資料來源 13 line1.append(2 * count, getRandomNum(20,300)); 14 count++; 15 if(count > 10){ 16 line1.clear(); 17 count = 0; 18 } 19 } 20 interval: 1000;running:true;repeat: true; 21 onTriggered: timeChanged(); 22 }View Code
效果
分析
不管是折線/曲線，他都是一個個點（XYPoint）組成的。其實在QML中，一條線就像一個list，往list新增資料，ChartView會自動顯示出來。藉助F1檢視幫助文件，我們可以看到SplineSeries的父類是XYSeries。
而XYSeries的公共方法如下：
我們就是通過.append(x,y)的方式往list新增資料。有了.append(x,y),自然會想到remove(x,y)。由於我們沒有記錄追加的點資料(x,y)，所以我們改用remove(index)這個方法。那麼在小於閾值時，.append()新來的資料；等於閾值時，先.append()新來的資料，同時.remove(0)掉list首的資料，是不是就可以達到動態曲線效果了呢？看效果。
Timer{ id:timer property int count: 0 //生成隨機數(>=Min,<=Max) function getRandomNum(Min,Max) { var Range = Max - Min; var Rand = Math.random(); return(Min + Math.round(Rand * Range)); } function timeChanged() { //隨機數模擬資料來源 line1.append(2 * count, getRandomNum(20,300)); count++; if(count > 10){ line1.remove(0); } } interval: 1000;running:true;repeat: true; onTriggered: timeChanged(); }View Code
效果
變成一條亂竄的蚯蚓了，脫離了Y軸。我們都知道ChartView可以看成是一塊畫布和一個座標系的疊加。畫布可以無限大，而我們看到的內容只能是XY軸矩形範圍內的有限內容。那我們是否能線上條遊離時，移動XY矩形視窗的位置來矯正視覺效果，感覺這樣視覺上是沒差的。
注意到ChartView有這樣一個方法scroll(pixels)。
不過注意到這個方法的形參是畫素為單位的。果斷放棄了這個想法，因為要考慮到螢幕尺寸適配性的問題。相同的移動畫素量，不同尺寸不同解析度下移動的距離是不同的。那麼又應該怎麼實現為我們的最終效果呢？
最後實現方式
思路：
- 把資料處理放在C++的類中實現
- QML只負責傳遞的資料
C++
graphList.h
#ifndef GRAPHLIST_H #define GRAPHLIST_H /** * @Author * @Description 圖表的資料來源(溫度曲線圖) * @Date 2020-1-4 */ #include <QObject> #include <QtMath> #include "plc/plcwordunit.h" struct graphModel{ PlcWordUnit scalingPowderWord; PlcWordUnit preheatOneWord; PlcWordUnit preheatTwoWord; PlcWordUnit preheatThreeWord; PlcWordUnit weldWord; PlcWordUnit coolingOneWord; PlcWordUnit coolingTwoWord; PlcWordUnit coolingThreeWord; }; class GraphList : public QObject { Q_OBJECT Q_PROPERTY(int lineCount READ getLineCount NOTIFY lineCountChanged) Q_PROPERTY(int lineLength READ getLineLength NOTIFY lineLengthChanged) Q_PROPERTY(int lineSize READ getLineSize NOTIFY lineSizeChanged) Q_PROPERTY(int workSide READ getWorkSide WRITE setWorkSide NOTIFY workSideChanged) public: explicit GraphList(QObject *parent = nullptr); ~GraphList(); Q_INVOKABLE void timeOut(); Q_INVOKABLE void clearData(); Q_INVOKABLE float getDataSource(int line,int number); enum workSide{ WORKSIDE_ONE_SIDE = 0, WORKSIDE_TWO_SIDE = 1 }; int getLineCount(); int getLineLength(); int getLineSize(); int getWorkSide(); void setWorkSide(int side); signals: void lineCountChanged(); void lineLengthChanged(); void lineSizeChanged(); void workSideChanged(); private: //QVector<QVector<int>>mDataList; int mLineCount; int mLineLength; int mWorkSide; //graphModel mCurrentData;//實時讀取的結構體 graphModel mDataList[2];//預定義，用於切換到mCurrentData QVector<QVector<float>> mDataSource; }; #endif // GRAPHLIST_HView Code
graphList.cpp
#include "graphlist.h" GraphList::GraphList(QObject *parent) : QObject(parent) { mLineCount = 8; mLineLength = 58; mWorkSide = WORKSIDE_ONE_SIDE; mDataSource.resize(mLineCount); } GraphList::~GraphList() { clearData(); } /** * @brief 定時重新整理動作 * @param * @return void */ void GraphList::timeOut() { int length = mDataSource[0].size(); if(length < mLineLength){ mDataSource[0].append(mDataList[mWorkSide].scalingPowderWord.plcData().toFloat()); mDataSource[1].append(mDataList[mWorkSide].preheatOneWord.plcData().toFloat()); mDataSource[2].append(mDataList[mWorkSide].preheatTwoWord.plcData().toFloat()); mDataSource[3].append(mDataList[mWorkSide].preheatThreeWord.plcData().toFloat()); mDataSource[4].append(mDataList[mWorkSide].weldWord.plcData().toFloat()); mDataSource[5].append(mDataList[mWorkSide].coolingOneWord.plcData().toFloat()); mDataSource[6].append(mDataList[mWorkSide].coolingTwoWord.plcData().toFloat()); mDataSource[7].append(mDataList[mWorkSide].coolingThreeWord.plcData().toFloat()); }else { mDataSource[0].removeFirst(); mDataSource[0].append(mDataList[mWorkSide].scalingPowderWord.plcData().toFloat()); mDataSource[1].removeFirst(); mDataSource[1].append(mDataList[mWorkSide].preheatOneWord.plcData().toFloat()); mDataSource[2].removeFirst(); mDataSource[2].append(mDataList[mWorkSide].preheatTwoWord.plcData().toFloat()); mDataSource[3].removeFirst(); mDataSource[3].append(mDataList[mWorkSide].preheatThreeWord.plcData().toFloat()); mDataSource[4].removeFirst(); mDataSource[4].append(mDataList[mWorkSide].weldWord.plcData().toFloat()); mDataSource[5].removeFirst(); mDataSource[5].append(mDataList[mWorkSide].coolingOneWord.plcData().toFloat()); mDataSource[6].removeFirst(); mDataSource[6].append(mDataList[mWorkSide].coolingTwoWord.plcData().toFloat()); mDataSource[7].removeFirst(); mDataSource[7].append(mDataList[mWorkSide].coolingThreeWord.plcData().toFloat()); } //qDebug()<<"dataList0 - "<<mDataList[0]; } void GraphList::clearData() { //qDebug()<<"clearData"; mDataSource[0].clear(); mDataSource[1].clear(); mDataSource[2].clear(); mDataSource[3].clear(); mDataSource[4].clear(); mDataSource[5].clear(); mDataSource[6].clear(); mDataSource[7].clear(); } float GraphList::getDataSource(int line, int number) { if((line < 0 || line >= mLineCount ) || (number < 0 || number >= mLineLength)){ return 0; } return mDataSource[line][number]; } int GraphList::getLineCount() { return mLineCount; } int GraphList::getLineLength() { return mLineLength; } int GraphList::getLineSize() { return mDataSource[0].size(); } int GraphList::getWorkSide() { return mWorkSide; } void GraphList::setWorkSide(int side) { mWorkSide = side; }View Code
QML
Timer{ id:timer function timeChanged() { graphList.timeOut(); //顯示呼叫timeout，重新整理C++類中的資料 line1.clear(); line2.clear(); line3.clear(); line4.clear(); line5.clear(); line6.clear(); line7.clear(); line8.clear(); //clear後重新新增資料 for(var i = 0;i < graphList.lineSize;i++){ line1.append(i,graphList.getDataSource(0,i)); line2.append(i,graphList.getDataSource(1,i)); line3.append(i,graphList.getDataSource(2,i)); line4.append(i,graphList.getDataSource(3,i)); line5.append(i,graphList.getDataSource(4,i)); line6.append(i,graphList.getDataSource(5,i)); line7.append(i,graphList.getDataSource(6,i)); line8.append(i,graphList.getDataSource(7,i)); } } interval: 1000;running:true;repeat: true; onTriggered: timeChanged(); }View Code
這裡一共顯示的是8條曲線。C++定義的是QVector<QVector<float>> mDataSource;。QML則是通過呼叫graphList.getDataSource(0,i)方法來獲取到資料的。
因為我這邊是測試環境，獲取到的溫度值都是0，就不貼效果圖了。