在HTML中使用PHP的变量的最简单方法

时间:2012-07-22 19:29:08

标签: php html

我正在使用谷歌图表,我需要从PHP文件(或HTML文件中的PHP?)中获取数据,以将数据提供给图表。那么我该怎么做呢,并确保在绘制图表之前抓取数据。 我已经去了解如何使用PHP从Mysql数据库中获取数据

这是我需要将代码放入

的代码
<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Color');
        data.addColumn('number', 'Votees ');
        data.addRows([
          ['Value from Mysql', 3000],
          ['Value2 from Mysql', 13000],

        ]);

        // Set chart options
        var options = {'title':'Table Name From MySql',
                       'width':600,
                       'height':450};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
      <div id="chart_div"></div> 


  </body>
</html>

3 个答案:

答案 0 :(得分:1)

HTML中没有变量 - 我认为你的意思是你希望能够将PHP值与你用于Google图表的代码一起使用。我没有使用Goggle图表的经验,但是from what I can see它使用了一些JavaScript API。也许您正在寻找的是一种将您的值变为JavaScript变量的方法,以便您在处理图表插件时可以使用它们。

这正是PHP的用途 - 采用静态静态内容和嵌入脚本为其提供动态内容。

例如,您可以让PHP初始化一个JavaScript变量 -

<?php
  $some_php_var = 'overflow';
?>

<script type="text/javascript">
  var stack = '<?php echo $some_php_var; ?>';
</script>

现在您将拥有一个名为stack的JavaScript变量,其值将为“溢出”。


可以在任何地方使用相同的技术 - 即使在变量定义的中间。让我们以您的代码为例 -

// Set chart options
var options = {
  'title':'<?php echo $dbResult['Table Name'] ?>',
  'width':600,
  'height':450
};

...

data.addRows([
  ['<?php echo $dbResult['value1']; ?>', 3000],
  ['<?php echo $dbResult['value2']; ?>', 13000],
]);

答案 1 :(得分:1)

您可以像这样从PHP插入值:

  <?php echo $myVariableName; ?>

答案 2 :(得分:0)

最简单的例子:在PHP文件中,如index.php

<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<?php
echo $the_data_as_a_string;
?>
</body>

更好的方法是实际打开一个text / plain类型的脚本标记并将数据转储到那里。

<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<script id="the-data" type="text/html" ><?php echo $the_data_as_a_string; ?></script>
<script type="text/javascript" >
    var data = document.getElementById('the-data').innerHTML;
</script>
</body>

顶级脚本标签不会被浏览器执行,但是底层标签仍然可以作为字符串访问它的内容,并用它做任何需要。

编辑:

优点是您可以安全地编写.js文件并将它们包含为静态文件,因此它们将被浏览器缓存。

此外,您可以包含一个数据脚本,这样即使html将是静态的=每次都没有更改=浏览器缓存。

请注意,这只是一个懒人对数据的ajax请求,您应该考虑这一点。 :)