将 Google 图表与 php/mysqli 一起使用 - 无法正常工作

Posted

技术标签:

【中文标题】将 Google 图表与 php/mysqli 一起使用 - 无法正常工作【英文标题】:Using Google charts with php/mysqli - cannot get it working 【发布时间】:2013-09-16 19:38:18 【问题描述】:

我从这里阅读了很多示例,但由于某种原因,我无法让它们发挥作用。

我从这里拿了这个例子:

php mysql Google Chart JSON - Complete Example

并且正在使用 PHP-MySQLi-JSON-Google 图表示例

由于某种原因,没有使用 foreach 方法从 mysql 数据库中提取数据。我现在使用 fetch_assoc 将其更改为 while 循环,它已提取数据并创建了正确的 json 格式。

当我加载页面时,虽然我只是得到一个空白页面。

我现在不知道为什么它不起作用。

这里有一些信息可能会有所帮助: php 5.3.17 OpenSuse 12.3

我检查了 apache 日志,没有错误。有什么想法我还能做些什么来解决这个问题?

jsonTable:

"cols":[
    "label":"Weekly Task","type":"string",
    "label":"Percentage","type":"number"
    ],
"rows":[
    "c":["v":"running","v":30],
    "c":["v":"jorunning","v":30],
    "c":["v":"job","v":20],
    "c":["v":"sleeping","v":40],
    "c":["v":"exercise","v":50],
    "c":["v":"resting","v":30]
]

这是我的代码:

 <?php

 $DB_NAME = 'chart';
 $DB_HOST = 'localhost';
 $DB_USER = 'test';
 $DB_PASS = '123456';

$mysqli = new mysqli($DB_HOST, $DB_USER, $DB_PASS, $DB_NAME);

if (mysqli_connect_errno()) 
  printf("Connect failed: %s\n", mysqli_connect_error());
  exit();

$query = "select * from googlechart";

if ($result = $mysqli->query($query)) 
    
    $rows = array();
    $table = array();
    $table['cols'] = array(
            array('label' => 'Weekly Task', 'type' => 'string'),
            array('label' => 'Percentage', 'type' => 'number')
    );

    while ($row = $result->fetch_assoc()) 
            $temp = array();
            $temp[] = array('v' => (string) $row['weekly_activity']);
            $temp[] = array('v' => (int) $row['percentage']);
            $rows[] = array('c' => $temp);
            
   
 

$table['rows'] = $rows;
$jsonTable = json_encode($table);
?>
<html>
<head>
<!--Load the Ajax API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
 <script type="text/javascript">
 // Load the Visualization API and the piechart package.

 google.load('visualization', '1', 'packages':['corechart']);

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

 function drawChart() 

  // Create our data table out of JSON data loaded from server.
  var data = new google.visualization.DataTable(<?=$jsonTable?>);
  var options = 
       title: 'My Weekly Plan',
      is3D: 'true',
      width: 800,
    height: 600
    ;
  // Instantiate and draw our chart, passing in some options.
  // Do not forget to check your div ID
  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
  chart.draw(data, options);

</script>
</head>

<body>
<!--this is the div that will hold the pie chart-->
<div id="chart_div"></div>
    <?php echo $jsonTable; ?>
 </body>
 </html> 

这是加载页面的源代码:

<html>
<head>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">   </script>
<script type="text/javascript">

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

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

function drawChart() 

  // Create our data table out of JSON data loaded from server.
  var data = new google.visualization.DataTable(<?=$jsonTable?>);
  var options = 
       title: 'My Weekly Plan',
      is3D: 'true',
      width: 800,
      height: 600
    ;
  // Instantiate and draw our chart, passing in some options.
  // Do not forget to check your div ID
  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);

</script>
</head>

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

</body>
</html>

【问题讨论】:

完全确定不是复制/粘贴错误&lt;?=$jsonTable?&gt; 而应该是&lt;?echo $jsonTable;?&gt; ?? 在浏览器中打开页面,查看源代码,然后发布。 @davidkonrad - 不,试过了。没用。来源已添加。 【参考方案1】:

我改成这样了:

 <?php echo $jsonTable; ?>

我现在更加困惑,为什么给出了 SO 上列出的所有示例并且他们说它们有效。

【讨论】:

Gr8!认为我非常接近 :) 您应该考虑接受自己的答案,这样将来可能会对其他人有所帮助(因为他们可以看到这是一个可行的解决方案)

以上是关于将 Google 图表与 php/mysqli 一起使用 - 无法正常工作的主要内容,如果未能解决你的问题,请参考以下文章

将 NOAA 图表与 Google 地图结合使用

将 Thymeleaf 与 Google 图表和 Java 地图一起使用

PHP, mysqli 数组

php中mysqli函数库常用函数

使用Appscript将Google图表中的3d图表作为图像插入电子邮件中

PHP mysqli_free_result()与mysqli_fetch_array()函数