在 Javascript 循环中增加 PHP 变量答案

【问题标题】：Increment PHP variable in Javascript loop在 Javascript 循环中增加 PHP 变量
【发布时间】：2013-01-16 02:55:07
【问题描述】：

我正在尝试制作一个图表（通过 Google 图表）来显示过去 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 是客户端，因此存在问题，但我该如何解决这个问题？

谢谢。

【问题讨论】：

为什么所有的计数变量？您可以使用 JSON <?php $arr = array(1,2,3,4); ?> /*Javascript*/ js_arr = JSON.parse(<?php json_encode($arr); ?>); 将服务器端 PHP 数组传递给 javascript。根据问题中提供的信息，我无法确定哪个计数变量正在发生变化；但我看到一个 PHP 计数变量没有被传递给 javascript，是这样吗？
15 x 24 != 96，你想说的是 4 * 24 = 96 或者为了更简单的理解 60 / 15 * 24

标签： php javascript variables loops reset

【解决方案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);

【讨论】：

【解决方案2】：

对于这些类型的事情，最好进行 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();

【讨论】：

【解决方案3】：

首先，我建议将实际时间存储在 DB 中（这样 Google 图形也可以理解它并且可以绘制轴）。但是要解决您的数据从 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/

【讨论】：