-2

嗨，我正在尝试在我的 android 应用程序中使用谷歌雷达图表，我的目标是尝试将用户名发送到 PHP 文件，并且从 PHP 文件中我想从数据库中检索数据并显示图表。我成功了，但是我无法渲染图表，谁能告诉我解决它的问题。

当我输入的列数超过所示的列时，我发现渲染图表存在问题，我无法渲染图表。

此输入有效 [100,10], [80,20], [60,30], [30,40], [25,50], [20,60], [10,70],

这种类型的输入不起作用

          [100,10,30],
          [80,20,30],
          [60,30,30],
          [30,40,30],
          [25,50,50],
          [20,60,60],
          [10,70,80],


<html>
 <head>
    <title></title>      
 </head>  
 <?php  $con=mysql_connect("localhost","root", "innernet") or die("Failed to connect with database!!!!");
        mysql_select_db("mobiledb", $con);       
        //$sth = mysql_query("SELECT `id`, `Q1`, `Q2` FROM `table2` WHERE `id`=8710058770");        
        $user= $_POST["user"];
        echo "$user";
        $response["cols"] = array();    
       // $news = array();
        //$news["id"] = "";
        //$news["label"] = "ID";                                           
        //$news["type"] = "string";                                           

        //array_push($response["cols"], $news);

        $news = array();

        $news["label"] = "Q1a";                                           
        //$news["type"] = "number";                                           

        array_push($response["cols"], $news);

        $news = array();

        $news["label"] = "Q1b";                                           
        //$news["type"] = "number";                                           

        array_push($response["cols"], $news);
        $news = array();

        $news["label"] = "Q2a";                                           
        //$news["type"] = "number";                                           

        array_push($response["cols"], $news);       
         $news = array();

        $news["label"] = "Q2b";                                           
        //$news["type"] = "number";                                           

        array_push($response["cols"], $news); 
        $news = array();

        $news["label"] = "Q3a";                                           
        //$news["type"] = "number";                                           

        array_push($response["cols"], $news);       
         $news = array();

        $news["label"] = "Q3b";                                           
        //$news["type"] = "number";                                           

        array_push($response["cols"], $news);
        $news = array();

        $news["label"] = "Q4a";                                           
        //$news["type"] = "number";                                           

        array_push($response["cols"], $news);       
         $news = array();

        $news["label"] = "Q4b";                                           
        //$news["type"] = "number";                                           

        array_push($response["cols"], $news);
        $news = array();

        $news["label"] = "Q5a";                                           
        //$news["type"] = "number";                                           

        array_push($response["cols"], $news);       
         $news = array();

        $news["label"] = "Q5b";                                           
        //$news["type"] = "number";                                           

        array_push($response["cols"], $news);
        $news = array();

        $news["label"] = "Q6a";                                           
        //$news["type"] = "number";                                           

        array_push($response["cols"], $news);       
         $news = array();

        $news["label"] = "Q6b";                                           
        //$news["type"] = "number";                                           

        array_push($response["cols"], $news);
        $news = array();

        $news["label"] = "Q7a";                                           
        //$news["type"] = "number";                                           

        array_push($response["cols"], $news);       
         $news = array();

        $news["label"] = "Q7b";                                           
        //$news["type"] = "number";                                           

        array_push($response["cols"], $news);
        $news = array();

        $news["label"] = "Q8a";                                           
        //$news["type"] = "number";                                           

        array_push($response["cols"], $news);       
         $news = array();

        $news["label"] = "Q8b";                                           
        //$news["type"] = "number";                                           

        array_push($response["cols"], $news);
        $news = array();

        $news["label"] = "Q9a";                                           
        //$news["type"] = "number";                                           

        array_push($response["cols"], $news);       
         $news = array();

        $news["label"] = "Q9b";                                           
        //$news["type"] = "number";                                           

        array_push($response["cols"], $news);
       // $news = array();
      //  $news["id"] = "";
        //$news["label"] = "ts";                                           
      //  $news["type"] = "number";                                           

       // array_push($response["cols"], $news);       


        $result = mysql_query("SELECT  `Q1a`, `Q1b`, `Q2a`, `Q2b`, `Q3a`, `Q3b`, `Q4a`, `Q4b`, `Q5a`, `Q5b`, `Q6a`, `Q6b`, `Q7a`, `Q7b`, `Q8a`, `Q8b`, `Q9a`, `Q9b` FROM goaltest WHERE id='test'") or die(mysql_error());

        if (mysql_num_rows($result) > 0)
        {       
            $response["rows"] = array();    $table = array();   $rows = array();  
            while ($row = mysql_fetch_array($result))
            {        
                $temp = array();           
                //$temp[] = array('v' => (string) $row['id']);          
                $temp[] = array('v' => (int) $row['Q1a']);
                $temp[] = array('v' => (int) $row['Q1b']);
                $temp[] = array('v' => (int) $row['Q2a']);
                $temp[] = array('v' => (int) $row['Q2b']);
                $temp[] = array('v' => (int) $row['Q3a']);
                $temp[] = array('v' => (int) $row['Q3b']);
                $temp[] = array('v' => (int) $row['Q4a']);
                $temp[] = array('v' => (int) $row['Q4b']);
                $temp[] = array('v' => (int) $row['Q5a']);
                $temp[] = array('v' => (int) $row['Q5b']);
                $temp[] = array('v' => (int) $row['Q6a']);
                $temp[] = array('v' => (int) $row['Q6b']);
                $temp[] = array('v' => (int) $row['Q7a']);
                $temp[] = array('v' => (int) $row['Q7b']);
                $temp[] = array('v' => (int) $row['Q8a']);
                $temp[] = array('v' => (int) $row['Q8b']);
                $temp[] = array('v' => (int) $row['Q9a']);
                $temp[] = array('v' => (int) $row['Q9b']);
                //$temp[] = array('v' => (int) $row['ts']);

                array_push($response["rows"], array('c' => $temp));                                      
            }            
            echo json_encode($response);             
        }



    ?>

    <!--Load the AJAX API -->
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['imagechart']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {


        var response = '<?php echo json_encode($response); ?>';     alert(' hi ' + response);            
        var obj = eval ("(" + response + ")");  
           var options = {cht: 'rs', chco: '00FF00,FF00FF', chg: '25.0,25.0,4.0,4.0', chm: 'B,FF000080,0,1.0,5.0|B,FF990080,1,1.0,5.0'};
            // Chart API chart type 'rs' is radar chart
            options.cht = 'rs';

            // set the line colors
            //options.colors = ['#00FF00' , '#FF00FF'];

            // fill the area under the lines
            options.fill = true;

            // create a grid for the chart
            //options.chg = '25.0,25.0,4.0,4.0';


            var dataTable = google.visualization.DataTable(response);


            var chart = new google.visualization.ImageChart(document.getElementById('visualization'));
            chart.draw(dataTable, options);
      }


      google.setOnLoadCallback(drawVisualization);
    </script>
<body style="font-family: Arial;border: 0 none;">
    <div id="visualization" style="width: 300px; height: 300px;"></div>
  </body>
</html>

这是我呈现的javascript代码。

<html>
 <head>
    <title></title>      
 </head>  
 {"cols":[{"label":"Q1a"},{"label":"Q1b"},{"label":"Q2a"},{"label":"Q2b"},{"label":"Q3a"},{"label":"Q3b"},{"label":"Q4a"},{"label":"Q4b"},{"label":"Q5a"},{"label":"Q5b"},{"label":"Q6a"},{"label":"Q6b"},{"label":"Q7a"},{"label":"Q7b"},{"label":"Q8a"},{"label":"Q8b"},{"label":"Q9a"},{"label":"Q9b"}],"rows":[{"c":[{"v":12},{"v":34},{"v":132},{"v":3},{"v":23},{"v":23},{"v":13},{"v":13},{"v":13},{"v":13},{"v":14},{"v":14},{"v":13},{"v":21},{"v":12},{"v":12},{"v":12},{"v":23}]},{"c":[{"v":10},{"v":52},{"v":16},{"v":61},{"v":9},{"v":31},{"v":20},{"v":48},{"v":18},{"v":64},{"v":38},{"v":64},{"v":19},{"v":56},{"v":35},{"v":57},{"v":37},{"v":55}]}]}
    <!--Load the AJAX API -->
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['imagechart']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {


        var response = '{"cols":[{"label":"Q1a"},{"label":"Q1b"},{"label":"Q2a"},{"label":"Q2b"},{"label":"Q3a"},{"label":"Q3b"},{"label":"Q4a"},{"label":"Q4b"},{"label":"Q5a"},{"label":"Q5b"},{"label":"Q6a"},{"label":"Q6b"},{"label":"Q7a"},{"label":"Q7b"},{"label":"Q8a"},{"label":"Q8b"},{"label":"Q9a"},{"label":"Q9b"}],"rows":[{"c":[{"v":12},{"v":34},{"v":132},{"v":3},{"v":23},{"v":23},{"v":13},{"v":13},{"v":13},{"v":13},{"v":14},{"v":14},{"v":13},{"v":21},{"v":12},{"v":12},{"v":12},{"v":23}]},{"c":[{"v":10},{"v":52},{"v":16},{"v":61},{"v":9},{"v":31},{"v":20},{"v":48},{"v":18},{"v":64},{"v":38},{"v":64},{"v":19},{"v":56},{"v":35},{"v":57},{"v":37},{"v":55}]}]}';     alert(' hi ' + response);            
        var obj = eval ("(" + response + ")");  
           var options = {cht: 'rs', chco: '00FF00,FF00FF', chg: '25.0,25.0,4.0,4.0', chm: 'B,FF000080,0,1.0,5.0|B,FF990080,1,1.0,5.0'};
            // Chart API chart type 'rs' is radar chart
            options.cht = 'rs';

            // set the line colors
            //options.colors = ['#00FF00' , '#FF00FF'];

            // fill the area under the lines
            options.fill = true;

            // create a grid for the chart
            //options.chg = '25.0,25.0,4.0,4.0';


            var dataTable = google.visualization.DataTable(response);


            var chart = new google.visualization.ImageChart(document.getElementById('visualization'));
            chart.draw(dataTable, options);
      }


      google.setOnLoadCallback(drawVisualization);
    </script>

  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization" style="width: 300px; height: 300px;"></div>
  </body>
</html>
4

1 回答 1

1

您正在加载错误的图表库：

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

应该：

google.load('visualization', '1', {'packages':['imagechart']});

此外，您的选项数组末尾有一个尾随逗号，您应该将其删除：

var options = {cht: 'rs', chco: '00FF00,FF00FF', chg: '25.0,25.0,4.0,4.0', chm: 'B,FF000080,0,1.0,5.0|B,FF990080,1,1.0,5.0'};

您也可以简化对 JSON 的处理，因为无需将其作为字符串输入然后对其进行评估 - 您可以按原样使用输出：

var data = new google.visualization.DataTable(<?php echo json_encode($response); ?>);

编辑：

还有一些你应该做的事情。首先，删除这一行：

echo json_encode($response);

从顶部的 PHP 部分，因为它正在将 json 字符串打印到您不需要的 HTML 中。其次，将您的 javascript 的 script 标签移动到<head>or<body>元素中，因为<script>它不是<html>. 第三，您缺少newDataTable 构造函数前面的关键字：

var dataTable = new google.visualization.DataTable(response);

这些调整应该可以解决您的问题。

于 2013-08-05T15:41:21.670 回答