QML之动态Charts（一）

题外话

原本想用QML做个带频谱音乐播放器，奈何Qt自身的系统bug。

 使用QAudioProbe获取音频的频谱，遇到下面错误提示：
 提示[0x80004005] Failed to connect the audio sample grabber。
 哪位哥们遇到过这个问题呀，后面解决掉的，求告知？

步入正题

Charts在QML中的使用

1、频谱效果

1、main.qml

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    VerticalSpectrum{}
}

2、VerticalSpectrum.qml

import QtQuick 2.15
import QtCharts 2.15


ChartView {
    id:view
    property bool isShow1: true
    anchors.fill: parent
    backgroundColor: "teal"
    ValueAxis{
        id:myAxisX
        min:0
        max:100
        visible: false
        tickCount: 101;
    }

    ValueAxis{
        id:myAxisY
        min:0
        max:50
        visible: false
        tickCount: 51;
    }

    LineSeries{
        id:myLine1
        axisX: myAxisX
        axisY: myAxisY
        visible: isShow1
        color: "#00ffff"
    }

    LineSeries{
        id:myLine2
        axisX: myAxisX
        axisY: myAxisY
        visible: !isShow1
        color: "#00ffff"
    }

    Timer{
        id:myTimer
        interval: 300
        running: true
        repeat: true
        onTriggered: {
            isShow1=!isShow1
            var index=0
            var key=100
            if(isShow1){//myLine1在显示，那么myLine2此时就在更新数据
                myLine2.clear()
                for(index;index<key;++index){
                    myLine2.append(index,Math.random()*50);
                }
            }
            else{//myLine2在显示，那么myLine1此时就在更新数据
                myLine1.clear();
                for(index;index<key;++index){
                    for(index;index<key;index++){
                        myLine1.append(index,Math.random()*50);
                    }
                }
            }
        }
    }
}

效果如下：

音乐频谱效果

2、动态平移波纹效果

1、main.qml

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    HorizontalWave{}
}

2、HorizontalWave.qml

import QtQuick 2.15
import com.DataSource 1.0
import QtCharts 2.15

ChartView {
    id: view
    property int count: 0  
    property int baseX: 0 //view的横坐标，它随时间在自增，以达到平移效果
    title: "Line"
    backgroundColor: "teal"
    anchors.fill: parent
    antialiasing: true
    animationOptions: ChartView.SeriesAnimations
    ValueAxis {
        id: myAxisX
        min: 0
        max: 10
        tickCount: 11
        visible: false
        labelsColor: "#fff"
        labelFormat: "%d"
    }
    ValueAxis {
        id: myAxisY
        min: 0
        max: 50
        tickCount: 51
        visible: false
        labelsColor: "#fff"
        labelFormat: "%d"
    }

    LineSeries {
        id:myline1
        name: "LineSeries"
        axisX:myAxisX
        axisY: myAxisY
        color: "#00ffff"
        useOpenGL: true
    }

    Timer{
        id:timer;
        running: true
        repeat: true
        interval: 100
        onTriggered: {
            myline1.append(baseX,Math.random()*50);
            count++;
            baseX++;
            if(count>=myAxisX.tickCount+1){ 
                view.scrollRight(view.plotArea.width/(myAxisX.tickCount-1))
                myline1.remove(myline1.at(0)); //移除已经消失在view显示范围内的点，防止内存爆表
            }
            console.log(myline1.count)
        }
    }
}

效果如下：

动态水平波效果

3、柱状频谱效果

import QtQuick 2.15
import QtCharts 2.15

ChartView {
    id:view
    property bool isShow1: true
    width:parent.width/2
    height:parent.height/2
    anchors.fill: parent
    ValueAxis{
        id:xAxis
        min:0
        max:100
    }
    ValueAxis{
        id:myAxisX
        min:0
        max:50
        visible: false
        tickCount: 51;
    }
    ValueAxis{
        id:myAxisY
        min:0
        max:50
        visible: false
        tickCount: 51;
    }
    BarSeries{
        id:myLine1
        //axisX: myAxisX
        axisY: myAxisY
        visible: isShow1
        barWidth:2
        BarSet{
            id:set1
            color: "green"
            values:["","","","","","","","","","","","","","","","","","","",""
                ,"","","", "","","","","","","","","","","","","","","","","","","","","","","","","","","",]
        }
    }
    BarSeries{
        id:myLine2
        //axisX: myAxisX
        axisY: myAxisY
        visible: !isShow1
        barWidth:2
        labelsVisible: false
        BarSet{
            id:set2
            color: "green"
            values:["","","","","","","","","","","","","","","","","","","",""
                ,"","","", "","","","","","","","","","","","","","","","","","","","","","","","","","","",]
        }
    }
    Timer{
        property ListModel vaules:ListModel{}
        id:myTimer
        interval: 200
        running: true
        repeat: true
        onTriggered: {
            isShow1=!isShow1
            if(isShow1)//myLine1在显示，那么myLine2此时就在更新数据
                for(var i=0;i<50;i++)
                    set2.replace(i,Math.random()*50)
            else //myLine2在显示，那么myLine1此时就在更新数据
                for(var j=0;j<50;j++)
                    set1.replace(j,Math.random()*50)
        }
    }
}

效果如下：