QtChart柱狀圖動態加載數據

QtChart是qt自帶繪製圖表的模塊。其用法的一些關鍵點比如安裝的時候需要選擇QtChart的模塊，main函數需要使用QApplication等，很多博客都有說明。官方文檔只有數據寫死的demo，這裏記錄一下柱狀圖加載動態數據的實現方式。

先上代碼

import QtQuick 2.0
import QtCharts 2.3

Item {

    ChartView {
        id: chart
        antialiasing: true
        anchors.fill: parent

        //座標軸
        ValueAxis
        {
            id: axisX
            titleText: "Led [num]"
        }

        ValueAxis
        {
            id: axisY
            min: 0
            max: 3.3
            tickCount: 5
        }

        //柱狀圖
        BarSeries
        {
            id: barSeriesX
            axisX: axisX    //x軸
            axisY: axisY    //y軸

            //數據展示
            BarSet
            {
               id: barSetIdX
            }
        }
    }

    //設定數據的標籤
    function setLabelText (labelText) {
        barSetIdX.label = labelText
    }

    //設定y軸的標題
    function setYTitle (text) {
        axisY.titleText = text
    }

    //數據更新
    function updateData (data) {
        barSetIdX.values = data
        axisX.max = data.length
    }



}

主要是使用函數給外部提供接口進行動態更新座標軸名稱、標籤、數據等，數據更新就是給BarSet的values傳一個數組即可，使用很方便。

下面看調用的地方：

 Histogram {
        id: histogram
        width: 400
        height: 300
        x: 500
        y: 50
    }


    Connections {
        target: DataManager
        onSigStart: {
            var data = DataManager.getData();
            histogram.updateData(data);
            histogram.setLabelText("ADC");
            histogram.setYTitle("Y")
        }

    }

這裏的DataManager是c++創建的類，數據是c++那邊傳過來的，然後執行相關的函數即可。

看運行的效果：

這裏提一下QtChart的打包，如果用的是qml，用windeployqt.exe工具打包出來的時候，QtChart相關的庫並沒有，需要手動添加，並且需要添加兩部分的庫，一個是QML的

還有一個是在bin目錄下的

整個demo的下載地址爲點擊這裏