当输入超过 2 列时，谷歌雷达图不呈现

【问题标题】：Google radar chart not rendering when more than 2 columns of input is given当输入超过 2 列时，谷歌雷达图不呈现
【发布时间】：2013-08-05 10:33:24
【问题描述】：

您好，我正在尝试在我的 android 应用程序中使用 google 雷达图表，我的目标是尝试将用户名发送到 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>

【问题讨论】：

  • 旁注： 停止使用已弃用的 mysql_* 函数。请改用 MySQLi 或 PDO。
  • 您似乎在谈论在 Android 应用程序中加载网页。任何 JavaScript 错误？你能显示生成的 JavaScript 代码吗？
  • 首先我尝试在普通的网络浏览器中运行。
  • 正确的做法，有什么错误吗？以及生成的 JS 代码？
  • 是的，我有一个错误，我无法生成输出。

标签： php google-visualization


【解决方案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 的脚本标签移动到 &lt;head&gt; 或 &lt;body&gt; 元素中，因为 &lt;script&gt; 不是 &lt;html&gt; 的有效子元素。第三，您在 DataTable 构造函数前面缺少new 关键字：

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

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

【讨论】：

  • 非常感谢您的建议，但在尝试了您的所有建议后，我无法渲染图表，它只是向我显示白页。我试图检查页面但找不到任何错误。
  • 把浏览器中渲染的javascript贴出来（在浏览器中打开页面，查看源码，复制一下），我看看。
  • 您好，我已经添加了渲染的 java 脚本代码。请看一下。
  • 编辑了我上面的回复。
  • 对不起，我在编辑之前留下了评论，请再次检查。
猜你喜欢
  • 1970-01-01
  • 2018-02-21
  • 2017-04-24
  • 2017-05-19
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-07-17
  • 2020-12-05
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode