Pie CHart一直说我的第一列不是字符串(编辑)

时间:2016-07-21 11:23:28

标签: php ajax pdo google-visualization

让我简单介绍一下:过程如下:DB Method向侧脚本返回一个值 - >生成JSON - >发送到谷歌图表js文件。这将产生一个饼图图表,但它一直说第一列应该是一个字符串......它就是!代码:

PHP类方法:

<html> <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".btn1").click(function(){
        $("p").fadeOut()
    });
    $(".btn2").click(function(){
        $("p").fadeIn();
    });
});
</script>
</head>
<body>

<p>This is a paragraph.</p>

<button class="btn1">Fade out</button>
<button class="btn2">Fade in</button>

</body>
</html>

接收器和发射器

function select_heuristic_piechart1(&$conn){

        $query = ("SELECT hl_name AS name, count(hl_element2) As counted FROM `heuristic_listings` group by hl_element1");
        $statement = $conn->prepare($query);
        $statement->execute();
        $exist = $statement->fetchAll(PDO::FETCH_ASSOC);

        $rows = array();
        $table = array();

        $table['cols'] = array(

        // Labels for your chart, these represent the column titles.

            array('label' => 'first_header', 'type' => 'string'),
            array('label' => 'second_header', 'type' => 'number')

        );

        foreach($exist as $r) {

          $temp = array();

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

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

          // Values of each slice

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

        $table['rows'] = $rows;


        return $json = Json_encode($table,true);

和Ajax:

include './database.php';


$connection = new database();
$conn = $connection->connect_db();
$fetchedResult = $connection->select_heuristic_piechart1($conn);
header('Content-Type: application/json');
$json = json_encode($fetchedResult,true);

echo $json;

我不知道什么是错的,什么改变。有人能指出我正确的方向吗?

$ .ajax收到的JSON:

$.ajax({
  url: "./db/receiver_and_transmitter.php",
  data: 'GET',
  dataType: 'json',
  success: function(data){
        console.log('Yas');
        console.log(data);
        var data = new google.visualization.DataTable(data);

    },
  error:function(data){

      console.log('fail');
      console.log(data);
  } 
});

1 个答案:

答案 0 :(得分:0)

发布的JSON在PieChart中正常工作,请参阅以下工作代码段。

如果这来自success回调,则不应该出现问题。

你正在使用哪个谷歌图表库?
loader.js - 或 - jsapi

另外,load语句在哪里以及您使用的是哪个版本?

&#13;
&#13;
google.charts.load('current', {
  callback: function () {
    var jsonData = '{"cols":[{"label":"first_header","type":"string"}, \
      {"label":"second_header","type":"number"}],"rows":[{"c":[{"v":"cwood1r"}, \
      {"v":5}]},{"c":[{"v":"sward2h"},{"v":2}]},{"c":[{"v":"etorres19"},{"v":2}]}, \
      {"c":[{"v":"mfranklinr"},{"v":3}]},{"c":[{"v":"mspencerd"},{"v":21}]},{"c": \
      [{"v":"jknight1y"},{"v":5}]},{"c":[{"v":"hhoward3"},{"v":4}]},{"c": \
      [{"v":"pross6"},{"v":8}]},{"c":[{"v":"swagner7"},{"v":23}]},{"c": \
      [{"v":"ajohnston1a"},{"v":8}]},{"c":[{"v":"dalexander1q"},{"v":2}]},{"c": \
      [{"v":"rmendoza1u"},{"v":2}]},{"c":[{"v":"mmurphy1f"},{"v":5}]},{"c": \
      [{"v":"rthomasp"},{"v":8}]},{"c":[{"v":"wsullivan5q"},{"v":1}]},{"c": \
      [{"v":"bperkins3f"},{"v":3}]},{"c":[{"v":"csimpson1j"},{"v":4}]},{"c": \
      [{"v":"mortiz2e"},{"v":10}]},{"c":[{"v":"sriley1h"},{"v":2}]},{"c": \
      [{"v":"tbryantf"},{"v":10}]},{"c":[{"v":"esimmons15"},{"v":5}]},{"c": \
      [{"v":"psullivan35"},{"v":2}]},{"c":[{"v":"jwatson9"},{"v":7}]},{"c": \
      [{"v":"jcampbell1v"},{"v":2}]},{"c":[{"v":"rford14"},{"v":5}]},{"c": \
      [{"v":"jnichols4m"},{"v":1}]},{"c":[{"v":"agreenm"},{"v":1}]},{"c": \
      [{"v":"rmorris1"},{"v":4}]},{"c":[{"v":"pboyd16"},{"v":1}]},{"c": \
      [{"v":"jdixon2"},{"v":12}]},{"c":[{"v":"kbrownv"},{"v":8}]},{"c": \
      [{"v":"slarson2l"},{"v":2}]},{"c":[{"v":"lrileyn"},{"v":9}]},{"c": \
      [{"v":"mholmes1t"},{"v":5}]},{"c":[{"v":"phill4"},{"v":5}]},{"c": \
      [{"v":"pwalkerh"},{"v":2}]},{"c":[{"v":"thawkins1g"},{"v":6}]},{"c": \
      [{"v":"crussell0"},{"v":27}]},{"c":[{"v":"cweaver3s"},{"v":2}]},{"c": \
      [{"v":"fgonzalesb"},{"v":8}]},{"c":[{"v":"elopez10"},{"v":3}]},{"c": \
      [{"v":"pnichols4f"},{"v":1}]},{"c":[{"v":"swallace1i"},{"v":4}]}]}';

    var data = new google.visualization.DataTable(jsonData);

    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, {
      height: 300,
      theme: 'maximized',
      width: 300
    });
  },
  packages: ['corechart']
});
&#13;
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
&#13;
&#13;
&#13;