0

我正在尝试制作一个图表（通过谷歌图表），显示过去 24 小时我服务器上的用户活动。每 15 分钟（通过 cron）获取用户活动的数据并存储在本地数据库中。由于数据库每 15 分钟更新一次，因此该图不是静态的。

该图显然需要一些数字作为输入，以便它可以绘制。这是一个简单的 javascript 工作示例：

dataTable.setValue(0, 0, 0);
dataTable.setValue(1, 0, 25.0);
dataTable.setValue(2, 0, 50.0);
dataTable.setValue(3, 0, 75.0);
dataTable.setValue(4, 0, 100.0);

上面的代码将绘制一条从 (x,y) = (0,0) 开始到 (x,y)=(4,100) 结束的对角线

所以我现在要做的是循环 96 次（每 15 分钟更新一次，持续 24 小时 = 15 x 24 = 96）。

所以这是我尝试过的：

for(x=0;x<96;x++){ //copy PHP array into javascript array
  javaArray[x] = <?php echo $sqlArray[$count]['clients_online'];?>;
  <?php $cnt++; ?>
}
for (var x=0;x<96;x++){ //draw graph
      dataTable.setValue(x, 0, javaArray[x]);
}

在第一个 for 循环中，我将 PHP 数组中的数据（从数据库中获取）传递到 javascript 数组中。完成后，我在第二个 for 循环中绘制图形。

$count 变量在 for 循环中正确递增，但我的问题是它在每次循环后重置。

我意识到 PHP 是服务器端，而 javascript 是客户端，因此是问题所在，但我该如何解决这个问题？

谢谢。

4

3 回答 3

1

可以循环遍历$sqlArray，用key作为计数器，每次迭代输出js。

<?php
foreach($sqlArray as $count => $val) 
{
?>
    dataTable.setValue(<?php echo $count; ?>,0,<?php echo $val['clients_online']; ?>);
<?php
}
?>

如果您的数据类似于下面的数组，这将起作用

Array
(
  [0] => Array
    (
        [clients_online] => 44
    )

  ...
  [95] => Array
    (
        [clients_online] => 66
    )

你的预期输出应该是这样的

  dataTable.setValue(0,0,44);
  ...
  dataTable.setValue(95,0,66);
于 2013-01-31T21:30:29.323 回答
1

对于这些类型的事情，最好进行 Ajax 调用。这允许前端和后端代码的解耦，这是您开始关注的问题之一。

这是您可以用来转储变量的 PHP。让我们称之为ajax-data-table.php。如果您的 sqlArray 有不同的布局，您可以相应地更改它。

<?php

$sqlArray = array(
    0 => 0.0,
    1 => 25.0,
    2 => 50.0,
    3 => 75.0,
    4 => 100.0,
);

echo json_encode($sqlArray, JSON_FORCE_OBJECT);

当它渲染时，它看起来像这样：

{"0":0,"1":25,"2":50,"3":75,"4":100}

然后，您可以使用 JS 使用 AJAX 进行调用。假设你有 jQuery：

request = $.getJSON('ajax-data-table.php');
var dataTable = request.responseText.evalJSON();
于 2013-01-31T22:42:35.527 回答
0

首先，我建议将实际时间存储在 DB 中（因此 Google graph 也可以理解它并且可以绘制轴）。但是要解决从 php 到 JS 的数据传递问题，您可以只对数组进行 json_encode，将其传递给 Javascript，例如：

<?php
  $data = array (
    array('Iterator', 'Visitors'),
    array(1, 25),
    array(2, 23),
    array(3, 17),
    array(4, 22),
    array(5, 15),
    array(6, 19),
    array(7, 17),
    array(8, 19),
  );
?>

和 JS/HTML 方面

var dataTable = <?= json_encode($data); ?>; // <?= is short for <?php echo - always available from 5.4

google.load("visualization", "1", {
    packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);

function drawChart() {

    var data = google.visualization.arrayToDataTable(dataArray);

    var options = {
        title: 'Visitors by 15min iterator'
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

JSFiddle 示例在这里：http: //jsfiddle.net/hTKGK/1/

于 2013-01-31T22:25:24.980 回答