如何将文本文件中的值用于Google Chart JavaScript仪表盘？

问题根源 #

1. 用include读取纯文本值不合适，且未处理文件可能存在的空白字符（换行、空格），导致JS拿到的是带无效空白的字符串。
2. 你把JS变量用引号包裹成了字符串类型，但Google Charts的arrayToDataTable需要数字类型的数值。
3. 之前尝试的PHP变量写法存在语法错误——PHP代码里不能嵌套<?php ?>标签。

修正步骤 #

1. 用file_get_contents读取文本文件内容，并用trim清除空白字符，确保拿到干净的数值字符串。
2. 在JS中直接输出PHP变量，不要加引号，让JS识别为数字类型。

修改后的完整代码 #

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <?php
      // 读取文件并清理空白字符
      $memUsage = trim(file_get_contents('core_mem_usage'));
    ?>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['gauge']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var Trefresh = 3000; //ms
        // 直接输出PHP变量，无需引号，JS会识别为数字类型
        var memValue = <?php echo $memUsage; ?>;
        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Memory', memValue],
        ]);

        var options = {
          width: 800, height: 240,
          redFrom: 80, redTo: 100,
          yellowFrom:55, yellowTo: 90,
          minorTicks: 5
        };

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

        // 可选：定时刷新仪表盘（无需刷新页面）
        setInterval(function() {
          var xhr = new XMLHttpRequest();
          xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
              var newMemValue = parseFloat(xhr.responseText);
              data.setValue(0, 1, newMemValue);
              chart.draw(data, options);
            }
          };
          xhr.open('GET', 'get_mem_usage.php', true);
          xhr.send();
        }, Trefresh);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 120px;"></div>
  </body>
</html>

可选：实现实时刷新的额外文件 #

如果需要定时更新数值，创建get_mem_usage.php文件，内容如下：

<?php
echo trim(file_get_contents('core_mem_usage'));
?>

关键说明 #

• file_get_contents比include更适合读取纯文本文件，不会执行文件内容，避免不必要的安全风险。
• trim必须添加，否则文件中的换行、空格会导致JS解析错误。
• JS变量不加引号，确保是数字类型，Google Charts才能正确渲染仪表盘。

内容的提问来源于stack exchange，提问作者gerb