Question

我一直在寻找几个小时，无法将其投入使用......

这是我的第一个网站，我有一个Google规格，需要向数据库询问它应该放在仪表上的值。我知道如何询问数据库以及如何更新仪表，问题是如何将echo文件中的echo变量传递给javascript文件。（php代码需要在一个单独的文件中，否则google gauges不会显示）。

您可以查看网站here的实际版本（目前指标是静态的）。

PHP代码：

<?php
    $DB_NAME = 'TSB';
    $DB_HOST = 'db.tecnico.ulisboa.pt';
    $DB_USER = 'xxxxxxxxx';
    $DB_PASS = 'xxxxxxxxx';
    $mysqli = new mysqli($DB_HOST, $DB_USER, $DB_PASS);
    if (mysqli_connect_errno()) {
        printf("Connect failed: %s\n", mysqli_connect_error());
        exit();
    }
    $mysqli->query('USE xxxxxxxxxxx;');
    $result = $mysqli->query('SELECT SOC FROM TSB ORDER By time DESC LIMIT 1;');
    $row = $result->fetch_array();
    $soc = $row['SOC'];
    echo $soc;
?>

echo的输出是一个int，或者至少来自数据库。

我在javascript文件中尝试的内容：

function SOC() {
  var data = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['SOC', 0]
  ]);
  var options = {
    width: 250, height: 250,
    redFrom: 0, redTo: 10,
    yellowFrom: 10, yellowTo: 25,
    minorTicks: 5,
    majorTicks: ['0','25','50','75','100']
  };
  var formatter = new google.visualization.NumberFormat({
    suffix: '%',
    fractionDigits: 0
  });
  formatter.format(data, 1);
  var chart = new google.visualization.Gauge(document.getElementById('SOC'));

  chart.draw(data, options);
  setInterval(function() {
    var socPHP;
    $.ajax({
        url: 'soc.php',
        type: 'get',
        dataType:'text',
        // I don't know how to properly put the $soc from php in a javascript variable
    });
    data.setValue(0, 1, 100); // 100 should be replaced by the value 
    //that came from the php file and the variable should be an INT
    chart.draw( data, options);
  }, 3000);
}

Tina建议后更新：

<?php
  $DB_NAME = 'TSB';
    $DB_HOST = 'db.tecnico.ulisboa.pt';
    $DB_USER = 'xxxxx';
    $DB_PASS = 'xxxxx';
    $mysqli = new mysqli($DB_HOST, $DB_USER, $DB_PASS);
    if (mysqli_connect_errno()) {
        printf("Connect failed: %s\n", mysqli_connect_error());
        exit();
    }
    $mysqli->query('USE xxxxxx;');
    $result = $mysqli->query('SELECT SOC FROM TSB ORDER By time DESC LIMIT 1;');
    $row = $result->fetch_array();
    $soc = $row['SOC'];
?>;

function SOC() {
  var data = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['SOC', 0]
  ]);
  var options = {
    width: 250, height: 250,
    redFrom: 0, redTo: 10,
    yellowFrom: 10, yellowTo: 25,
    minorTicks: 5,
    majorTicks: ['0','25','50','75','100']
  };
  var formatter = new google.visualization.NumberFormat({
    suffix: '%',
    fractionDigits: 0
  });
  formatter.format(data, 1);
  var chart = new google.visualization.Gauge(document.getElementById('SOC'));

  chart.draw(data, options);
  setInterval(function() {
    data.setValue(0, 1, <?php echo $soc; ?>);
    chart.draw( data, options);
  }, 3000);
}

Answer 1

如果我已正确理解您的问题，请在您的javascript文件中添加所需内容，例如

['SOC', <?php echo $soc; ?>]

Answer 2

查看仪表附带的文档，数据需要采用以下格式：[标签，值]

实现目标的一种方法是在您发送了ajax请求之后，需要在php脚本中构建一个数组，然后使用json_encode函数输出数据。您还需要将参数dataType: 'JSON'添加到您的ajax请求中。

编辑：令人沮丧的阅读所有评论，看到你没有到达任何地方所以我写了以下你应该能够适应。

您需要2个文件：包含HTML和JS的HTML或PHP文件，第二个文件需要是包含数据库查询的PHP文件。

文件1：

<html>
  <head>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
   <script type="text/javascript">
      google.charts.load('current', {'packages':['gauge']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Memory', 80],
          ['CPU', 55],
          ['Network', 68]
        ]);

        var options = {
          width: 400, height: 120,
          redFrom: 90, redTo: 100,
          yellowFrom:75, yellowTo: 90,
          minorTicks: 5
        };

        var chart = new google.visualization.Gauge(document.getElementById('chart_div'));

        chart.draw(data, options);

        setInterval(function() {
            $.ajax({
                url: "g.php",
                dataType: "JSON",
                data:{},
                success: function(x){
                  data.setValue(0, 1, x["key"]);
                  chart.draw(data, options);
                }
            });
        }, 2000);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 120px;"></div>
  </body>
</html>

文件2，g.php（这会生成一个随机数并输出JSON。您可以在此处放置数据库查询而不是rand（）函数）：

<?php

    $data = array();

    $data["key"] = rand(0,100);

    print(json_encode($data));

?>

第一个文件中的AJAX查询每2秒向文件2发送一次请求，g.php并获取一个简单的JSON对象。

从php获取回声到javascript（单独的文件）

2 个答案: