QML - 动态柱状图

QML - 动态柱状图

此博客始创于：http://blog.csdn.net/lys211

转载请注明出处

效果图：

文件结构：

首先，这个并不是真的频谱柱状图，只是用随机数来实现的数组数据

Timer{

        interval: 500;

        repeat: true;

        running: true;

        onTriggered: {

            if(barObject.length > 0){//生成随机数

                for(var i = 0; i < barCount; i++){

                    barObject[i].barHeight = Math.random()*root.height;

                }

            }

            else

            {

                root.createBarArea();

            }

        }

    }

BarGraphArea.qml文件内容：

import QtQuick 2.0

Rectangle {

    id:root

    width: 200

    height: 100

    color: "white";

    property var barObject: [];

    property var component: Qt.createComponent("BarItem.qml");

    property real spacing: 2;

    property real barWidth: 15;

    property real barInteral: spacing+barWidth;

    property real barCount: (root.width - spacing)/(barWidth + spacing);

    function resetBarArea(){

        if(barObject.length <= 0)

            return;

        for(var i in barObject){

            barObject[i].destoryBarItem();

        }

        barObject.length = 0;

    }

    function createBarArea(){

        console.log("barCount:", barCount);

        barCount = Math.round(barCount);

        for(var i = 0; i < barCount; i++){

            var object = component.createObject(root,

                                                {

                                                    "x":root.spacing + i*barInteral,

                                                    "width":root.barWidth,

                                                    "height":root.height,

                                                    "anchors.bottom":root.bottom,

                                                    "barHeight":0,

                                                });

            barObject.push(object);

        }

    }

    Timer{

        interval: 500;

        repeat: true;

        running: true;

        onTriggered: {

            if(barObject.length > 0){//生成随机数

                for(var i = 0; i < barCount; i++){

                    barObject[i].barHeight = Math.random()*root.height;

                }

            }

            else

            {

                root.createBarArea();

            }

        }

    }

}

BarItem.qml 文件内容：

import QtQuick 2.4

Rectangle {

    id:root

    width: 40

    height: 100

    color: "transparent";

    property alias barHeight: barFg.height;

    function destoryBarItem(){

        root.destroy();

    }

    Rectangle{

        id:barFg;

        anchors.left: parent.left;

        anchors.right: parent.right;

        anchors.bottom: parent.bottom;

        height: 50;

        color:"transparent";

        clip: true;

        Rectangle{

            id:barBgColor

            anchors.left: parent.left;

            anchors.right: parent.right;

            anchors.bottom: parent.bottom;

            height: root.height;

            gradient: Gradient {

                GradientStop {

                    position: 0.00;

                    color: "#db0707";

                }

                GradientStop {

                    position: 1.00;

                    color: "#06be3a";

                }

            }

        }

    }

}

代码存放地址：