Question

我尝试使用Google Area Chart和PHP来显示一些数据。问题是我不能让它工作。如果有人可以提供帮助，那将是最受关注的。

这是我的代码：

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Date');
        data.addColumn('number', 'hits');
        data.addRows([
        <?php
$query = mysql_query("SELECT * FROM hits WHERE url='$url' GROUP BY date");
 while ($row = mysql_fetch_array($query)){
$hits=mysql_num_rows($query);
$date=$row['date'];?>
 ['<?php echo "$date";?>', <?php echo ".$hits.";?>],
<?php } ?>
]);

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, title: 'Company Performance',
                          hAxis: {title: 'Date', titleTextStyle: {color: '#FF0000'}}
                         });
      }
    </script>

    <div id="chart_div"></div>

Answer 1

我肯定建议将您的PHP（服务器端）代码与JavaScript / html（客户端）代码分开。

Google图表和图形API的优点在于可以从中汲取一些示例，但是当您在包含JavaScript的块中嵌入带有MySQL查询的PHP时，重现您正在查看的内容变得更加困难UI元素。

以下是一个粗略的例子，说明你如何“可能”分割这些东西。实际上，您希望将服务器端代码（在您的情况下为PHP）放在与显示/用户界面代码（HTML和JavaScript）完全不同的文件中。

“前端代码”块中的“DATE”和“HITS”实际上不是变量或值，我只是指出这是您输入值的位置。理想情况下，您可以将MySQL查询中的数据通过PHP服务器代码传递给JavaScript代码，然后在那里进行迭代以构建图形。使用JSON数据交换格式可以很好地完成从PHP到JS的来回传递。 PHP和JavaScript（jQuery）都具有对JSON进行编码和解码的功能。

前端代码：

<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Date');
    data.addColumn('number', 'hits');
    data.addRows(
       ['DATE', 'HITS']
    );

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
    chart.draw(data, {width: 400, height: 240, title: 'Company Performance',
                      hAxis: {title: 'Date', titleTextStyle: {color: '#FF0000'}}
                     });
  }
</script>

<div id="chart_div"></div>

后端代码：

<?php
$query = mysql_query("SELECT * FROM hits WHERE url='$url' GROUP BY date");
$data_to_return = array();
while ($row = mysql_fetch_array($query))
{
    $hits=mysql_num_rows($query);
    $date=$row['date'];
    $data_to_return[$date] = $hits; //building array of date=>hits data
}
$data_to_send_to_front_end = json_encode($data_to_return); //ridiculous variable name
?>

谷歌面积图

1 个答案: