Question

我尝试根据示例here

创建一个饼图

在我的控制器（mycontroller / json）中，我有以下代码：

public function json(){

$whatever = '{
"cols": [
    {"id":"","label":"Topping","pattern":"","type":"string"},
    {"id":"","label":"Slices","pattern":"","type":"number"}
  ],
"rows": [
    {"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]},
    {"c":[{"v":"Onions","f":null},{"v":1,"f":null}]},
    {"c":[{"v":"Olives","f":null},{"v":1,"f":null}]},
    {"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]},
    {"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null}]}
  ]
}';
echo $whatever;
}

在我看来，我有以下代码（显示部分代码）

var jsonData = $.ajax({
    url: "<?= base_url()?>index.php/bunker/json",
    dataType:"json",
    async: false
    }).responseText;

// Create and populate the data table.
var popularCategory = google.visualization.DataTable(jsonData);
new google.visualization.PieChart(document.getElementById('category')).draw(popularCategory,
    {title:"Popularity by Category"});

最后我有一个名为'category'的div。但是，我总是收到一条消息，说明数据没有定义。

使用firebug进行快速调试，我没有收到错误，$ whatever变量也被视为正确的JSON格式。我在这里犯了什么错误？

欢呼声，

Answer 1

而不是：

var popularCategory = google.visualization.DataTable(jsonData);

你必须：

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

Answer 2

您的json变量的数据格式不正确。请查看饼图示例：

https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart

Answer 3

尝试使用php json编码功能：

echo json_encode($whatever);

此外，请确保您开始使用console.log（jsonData），因为浏览器控制台将输出类似于php中的print_r的'jsonData'变量。我从来没有在第一次使json格式化正确，所以console.log（jsonData）功能绝对是杀手。

使用CodeIgniter基于JSON数据创建Google饼图

3 个答案: