当超过2列输入时,Google雷达图表不会呈现 [英] Google radar chart not rendering when more than 2 columns of input is given

查看:127
本文介绍了当超过2列输入时,Google雷达图表不会呈现的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

您好我正在尝试在我的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)或die(无法连接数据库!!!!);
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);

$ b $ 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'或死(mysql_error());
$ b $ 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']);
$ b $ array_push($ response [rows],array('c'=> $ temp));
}
echo json_encode($ response);
}



?>

<! - 加载AJAX API - >
< script type =text / javascriptsrc =http://www.google.com/jsapi>< / script>
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.jstype =text / javascript>< / script>
< script type =text / javascript>
google.load('visualization','1',{packages:['imagechart']});
< / script>
< script type =text / javascript>
函数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' };
//图表API类型'rs'是雷达图
options.cht ='rs';

//设置线条颜色
//options.colors = ['#00FF00','#FF00FF'];

//填写行下的区域
options.fill = true;

//为图表创建一个网格
//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 =visualizationstyle =width:300px; height:300px;>< / div>
< / body>
< / html>

这是我的javascript代码,它被呈现。

 < HTML> 
< head>
< title>< / title>
< / head>
{cols:[{label:Q1a},{label:Q1b},{label:Q2a},{label:Q2b}, { 标签: Q3A},{ 标记: Q3B},{ 标记: Q4A},{ 标记: Q4B},{ 标记: Q5A}, { 标签: Q5B},{ 标记: 铁Q6a},{ 标记: Q6B},{ 标记: Q7A},{ 标记: Q7B}, { 标签: Q8a},{ 标记: Q8b},{ 标记: Q9a},{ 标记: Q9b}], 行:[{ 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}]}] }
<! - 加载AJAX API - >
< script type =text / javascriptsrc =http://www.google.com/jsapi>< / script>
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.jstype =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} ,{ 标签: Q2A},{ 标记: 提取的Q2b},{ 标记: Q3A},{ 标记: Q3B},{ 标记: Q4A} ,{ 标签: Q4B},{ 标记: Q5A},{ 标记: Q5B},{ 标记: 铁Q6a},{ 标记: Q6B} ,{ 标签: Q7A},{ 标记: Q7B},{ 标记: Q8a},{ 标记: Q8b},{ 标记: Q9a} ,{ 标签: Q9b}], 行:[{ 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' };
//图表API类型'rs'是雷达图
options.cht ='rs';

//设置线条颜色
//options.colors = ['#00FF00','#FF00FF'];

//填写行下的区域
options.fill = true;

//为图表创建一个网格
//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 =visualizationstyle =width:300px; height:300px;>< / div>
< / body>
< / html>


解决方案

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

  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脚本标记移动到< head> < body> 元素中< script> 不是< html> 的有效子项。第三,您在DataTable构造函数前缺少 new 关键字:

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

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


Hi I am trying to use google radar charts in my android app my goal was I am trying to send the user name to PHP file and From PHP file I would like to retrieve the data from from the database and display the chart. I am do it sucessfully but my I am unable render the chart can any one tell me the problem to solve it.

I FOUND PROBLEM REGARDING RENDERING THE GRAPH WHEN I GIVE INPUT MORE THAN COLUMNS AS SHOWN BELONG I AM UNABLE TO RENDER THE GRAPH.

THIS INPUT IS WORKING [100,10], [80,20], [60,30], [30,40], [25,50], [20,60], [10,70],

THIS TYPE OF INPUT IS NOT WORKING

          [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>

Here is my javascript code which is rendered.

<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> 

解决方案

You are loading the wrong chart library:

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

should be:

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

Also, you have a trailing comma at the end of your options array, which you should remove:

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'};

You can simplify your handling of the JSON as well, as there is no need to input it as a string and then eval it - you can just use the output as is:

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

Edit:

There are a few more things you should do. First, remove this line:

echo json_encode($response);

from the PHP section at the top, as it is printing out the json string into your HTML where you don't want it. Second, move the script tag for your javascript into either the <head> or <body> elements, as <script> is not a valid child of <html>. Third, you are missing the new keyword in front of the DataTable constructor:

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

Those adjustments should fix it you.

这篇关于当超过2列输入时,Google雷达图表不会呈现的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆