在Javascript循环中增加PHP变量

Question

我正在尝试创建一个图表（通过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次循环（24小时每15分钟一次更新= 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是客户端因此问题，但我该如何解决这个问题？

谢谢。

Answer 1

您可以遍历$sqlArray ，使用键作为计数器，并在每次迭代中输出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);

Answer 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();

Answer 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/