1

まず最初に、json エンコードを使用してデータポイントをエコーする data.php ファイルからデータを解析しようとしています。データポイントは、data.php ファイルが要求されるたびに更新されますが、一連のデータポイントでは更新されません。代わりに、時間の値を変更し、その y コンテンツを更新するだけです。実際にphpファイルに一連のデータポイントをエコーさせ、単一のデータポイントを更新しないようにする有効な方法を見つけていません。

次に、チャートは data.php ファイルを解析し、実際にデータポイントを表示します。しかし、このグラフを毎秒更新し、更新ごとに新しいデータポイントを追加して、帯域幅グラフを機能させたいと考えています。

これが私のコードです：

index.php:

<!DOCTYPE HTML>
<html>
<head>  
<script type="text/javascript" src="canvasjs.min.js"></script>
  <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script>
$(document).ready(function () {
$.getJSON("data.php", function (data_points) {
    var dps = data_points
var chart = new CanvasJS.Chart("chartContainer", {
zoomEnabled: true,
panEnabled: true,
animateEnabled: true,
data: [ {
type: "splineArea",
xValueType: "label",
y: "y",
dataPoints: dps } ]
});
chart.render();
});
});
</script>
</head>
<body>
    <div id="chartContainer" style="height: 300px; width: 100%;">
    </div>
</body>
</html>

data.php:

<?

session_start();
session_destroy();
session_start();

$rx[] = @file_get_contents("/sys/class/net/wlan0/statistics/rx_bytes");
sleep(1);
$rx[] = @file_get_contents("/sys/class/net/wlan0/statistics/rx_bytes");

$rbps = $rx[1] - $rx[0];

$round_rx=round($rbps/1, 2);

$time=date("Y-m-d H:i:s");
$_SESSION['rx'] = $round_rx;
$data_points['label'] = $time;
$data_points['y'] = $_SESSION['rx'];

echo json_encode([$data_points]);

?>

このマップを動的にする方法を知っている人がいたら、助けてください。data.php ファイルの出力例 (エコーされる内容) は次のとおりです。

[{"label":"2015-09-12 21:34:12","y":1500}]

提供されたヘルプに事前に感謝します。

4

1 に答える 1

1

そのようにチャートを更新するには、以下に示すように、(ajax リクエストの外部で) チャートを 1 回だけ作成し、毎秒 ajax リクエストを介して新しい dataPoints を追加し続ける必要があります。

<!DOCTYPE HTML>
<html>
    <head>  
        <script type="text/javascript" src="canvasjs.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>
            $(document).ready(function () {
                var chart = new CanvasJS.Chart("chartContainer", {

                    zoomEnabled: true,
                    panEnabled: true,
                    animateEnabled: true,
                    data: [ {
                        type: "splineArea",
                        xValueType: "label",
                        y: "y",
                        dataPoints: [] 
                    } ] 

                });

                function updateChart(){
                    $.getJSON("data.php", function (data_points) {
                        for(var i = 0; i < data_points.length; i++){
                            chart.options.data[0].dataPoints.push(data_points[i]);
                        }

                        chart.render();
                    });
                }               

                var updateInterval = 1000;

                setInterval(function(){
                        updateChart()
                }, updateInterval);

            });

        </script>
    </head>
    <body>
        <div id="chartContainer" style="height: 300px; width: 500px;"></div>
    </body>
</html>
于 2015-09-15T07:49:59.883 に答える