0

我正在尝试为我的数据库表创建一个饼图。

temp -> with columns(id, sent, pcount, ncount)

pcount并且ncount是整数。我想为这两个值创建一个饼图。

我正在尝试加载此文件。

<html>
<head>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);

function drawChart() 
{
    var jsonData = $.ajax({
        url: "graphData.php",
        dataType:"json",
        async: false
}).responseText;

// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);

var options = {'title':'Ticket Sales',
'width':500,    
'height':400};

// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.ColumnChart(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>

graphData.php 内容如下。

<?php

$con = mysqli_connect('127.0.0.1:3306', 'root', 'root', 'test');
if (mysqli_connect_errno()) {
    echo "Failed to connect to MySQL: ".mysqli_connect_error();
}

$sql = "SELECT pcount,count(*) AS count from temp";

if ($result=mysqli_query($con,$sql))
{
    $rownum=mysqli_num_rows($result);
    printf("Result set has %d rows.\n",$rownum);
    mysqli_free_result($result);
}

//start the json data in the format Google Chart js/API expects to receieve it
$data = array('cols' => array(array('label' => 'pcount', 'type' => 'int'),
                              array('label' => 'mcount', 'type' => 'int')),
              'rows' => array());

while($row = mysqli_fetch_row($result)) {
    $data['rows'][] = array('c' => array(array('v' => $row[0]), array('v' => $row[1])));
}    

echo json_encode($data);
?>

我从网上获取了这段代码，并根据我的需要进行了修改。当我加载我的第一个 PHP 页面时，它什么也没显示。我究竟做错了什么？

4

2 回答 2

2

我从网上获取了这段代码，并根据我的需要进行了修改。当我加载我的第一个 PHP 页面时，它什么也没显示。我究竟做错了什么？

您显然错误地修改了脚本，而不是根据您的需要。否则你不会问你做错了什么。

当问“我做错了什么？” 表示您不了解代码，包括。您的修改，您需要做的第一件事就是退回到代码的最后一个工作版本。

因此，现在提交您的更改，然后将您的脚本与最后一次工作提交进行比较。这将向您显示您的更改，并且通常更容易发现您引入错误的部分。

于 2013-07-11T10:40:28.417 回答
2

这是在 PHP 中从我的 sql 表创建 PIE 图表（只需更改其他图表的函数名称）的代码。

要记住的重要一点是

array('label' => 'ind_type', 'type' => 'string'),
    array('label' => 'sum', 'type' => 'number')

ind_type 和 sum 是我表中的列，这里的第一个 var 应该是字符串。

<?php
/*
Script  : PHP-JSON-MySQLi-GoogleChart
Author  : Enam Hossain
version : 1.0

*/

/*
--------------------------------------------------------------------
Usage:
--------------------------------------------------------------------

Requirements: PHP, Apache and MySQL

Installation:

  --- Create a database by using phpMyAdmin and name it "chart"
  --- Create a table by using phpMyAdmin and name it "googlechart" and make sure table has only two columns as I have used two columns. However, you can use more than 2 columns if you like but you have to change the code a little bit for that
  --- Specify column names as follows: "weekly_task" and "percentage"
  --- Insert some data into the table
  --- For the percentage column only use a number

      ---------------------------------
      example data: Table (googlechart)
      ---------------------------------

      weekly_task     percentage
      -----------     ----------

      Sleep           30
      Watching Movie  10
      job             40
      Exercise        20     


*/

  /* Establish the database connection */
 // $mysqli = new mysqli_connect('127.0.0.1:3306', 'root', 'root', 'test');

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

  $mysqli =mysqli_connect('127.0.0.1:3306', 'root', 'root', 'test');
if (mysqli_connect_errno()) {
    echo "Failed to connect to MySQL: ".mysqli_connect_error();
}

   /* select all the weekly tasks from the table googlechart */
  $result = $mysqli->query('SELECT * FROM new_temp');

  /*
      ---------------------------
      example data: Table (googlechart)
      --------------------------
      Weekly_Task     percentage
      Sleep           30
      Watching Movie  10
      job             40
      Exercise        20       
  */



  $rows = array();
  $table = array();
  $table['cols'] = array(

    // Labels for your chart, these represent the column titles.
    /* 
        note that one column is in "string" format and another one is in "number" format 
        as pie chart only required "numbers" for calculating percentage 
        and string will be used for Slice title
    */

    array('label' => 'ind_type', 'type' => 'string'),
    array('label' => 'sum', 'type' => 'number')

);
    /* Extract the information from $result */
    foreach($result as $r) {

      $temp = array();

      // The following line will be used to slice the Pie chart

      $temp[] = array('v' => (string) $r['ind_type']); 

      // Values of the each slice

      $temp[] = array('v' => (int) $r['sum']); 
      $rows[] = array('c' => $temp);
    }

$table['rows'] = $rows;

// convert data into JSON format
$jsonTable = json_encode($table);
//echo $jsonTable;


?>


<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: 'Index analysis',
          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>
  </body>
</html>
于 2013-07-12T10:30:42.640 回答