0

我目前可以使用 webchannel 将常量值从 qml 文件发送到 html 并显示值。但是当我发送一个动态变量舔时钟时间变量的初始值显示在 html 中，它不能随着时间的推移而更新。我使用动态图表来显示属性值。

如何发送和显示动态变量？

我的 QML 代码：

import QtQuick 2.0
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtWebChannel 1.0
import QtWebEngine 1.1

Window {
    id: clock
    width: 800
    height: 400
    visible: true

    property int seconds

    function timeChanged() {
        var date = new Date;
        seconds = date.getUTCSeconds();

    }
    Timer {
        interval: 100; running: true; repeat: true;
        onTriggered: clock.timeChanged()
    }



    WebChannel {
        id: channel
        registeredObjects: [myObject]
    }


    QtObject {
        id: myObject
        objectName: "myObject"
        WebChannel.id: "myObject"

        signal someSignal(string message);

        property string value: "hello world";

        property double time : clock.seconds ;

    }


    WebEngineView {
        id: webEnginView
        anchors.fill: parent
        url: "qrc:/viewer.html"

        webChannel: channel
    }

    Component.onCompleted: {
      channel.registerObject("myObject", myObject);
  }


}

我的html代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
 </script>
</head>

<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>

  <script type="text/javascript">


     new QWebChannel(qt.webChannelTransport, function(channel) {
     var myObject = channel.objects.myObject;
     var sin =  Math.sin(myObject.time);


var dataPoints = [];

var chart = new CanvasJS.Chart("chartContainer", {
        theme: "light2",
        title: {
                text: "Live Data"
        },
        data: [{
                type: "line",
                dataPoints: dataPoints
        }]
});
updateData();

// Initial Values
var xValue = 0;
var yValue = 10;
var newDataCount = 6;

function addData(data) {
        if(newDataCount != 1) {
                $.each(data, function(key, value) {
                        dataPoints.push({x: value[0], y: 10 });
                        xValue++;
                        yValue = 10;
                });
        } else {
                //dataPoints.shift();
                dataPoints.push({x: data[0][0], y: sin});
                xValue++;
                yValue = sin;
        }

        newDataCount = 1;
        chart.render();
        setTimeout(updateData, 1500);
}

function updateData() {
        $.getJSON("https://canvasjs.com/services/data/datapoints.php?xstart="+xValue+"&ystart="+yValue+"&length="+newDataCount+"type=json", addData);
}
});


</script>
</div>
</body>
</html>
4

0 回答 0