通过AJAX/JSON的Highcharts饼图：但切片错误和Json格式不正确？

Question

我是一个新手php/js/mysql程序员。

我想创建一个使用jquery的highcharts中的饼图，其中的数据是通过ajax从php中的echo json_encode动态发现的（包括mysql的select查询）。

两个问题：

1）饼图具有这些尾随 “切片：0％” 无处不耀斑。不知道这些来自哪里，它的意思，也不知道如何解决。

2）Json对我来说是新的。 JSON数据馈送似乎正在通过（萤火虫看到它），但格式看起来像这样。我试图把它归结为名称和百分比数字。像这样['页'，45.0]但不知道如何。这是在json/php中完成，还是应该在sql查询本身完成？

[{"contenttype":"BLOGPOST","count(*)":"2076"},{"contenttype":"COMMENT","count(*)":"2054"},{"contenttype":"MAIL","count(*)":"29448"},{"contenttype":"PAGE","count(*)":"33819"}] 

任何帮助非常赞赏

的highcharts js文件是在这里：

//Define the chart variable globally, 
var chart; 

//Request data from the server, add it to the graph and set a timeout to request again 

function requestData() { 
$.ajax({ 
    url: 'hc1.php', 
    success: function(point) { 
     var series = chart.series[0], 
      shift = series.data.length > 20; // shift if the series is longer than 20 

     // add the point 
     chart.series[0].addPoint(point, true, shift); 

     // call it again after one second 
     setTimeout(requestData, 1000);  
    }, 
    cache: false 
}); 
} 

$(document).ready(function(){ 

//Create the test chart 
chart = new Highcharts.Chart({ 
    chart: { 
      renderTo: 'mycontainer2', 
      plotBackgroundColor: null, 
      plotBorderWidth: null, 
      plotShadow: false, 
      events: {load: requestData} 
    }, 
    title: {text: 'Content Types in Wiki'}, 

tooltip: {formatter: function() {return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';} 
    }, 

plotOptions: { 
    pie: { 
     allowPointSelect: true, 
     cursor: 'pointer', 
     dataLabels: { 
      enabled: true, 
      //color: Highcharts.theme.textColor || '#000000', 
      //connectorColor: Highcharts.theme.textColor || '#000000', 
      formatter: function() { 
       return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; 
      } 
     } 
    } 
    }, 



     series: [{ 
     type: 'pie', 
     name: 'Content', 
     data: [] 
    }] 
});   

PHP文件是在这里：

<?php 
// Set the JSON header 
header("Content-type: text/json"); 

// Connect to db 
include('dbconnect.php'); 

// Count version 1 of content types of interest 
$query = ("select contenttype, count(*) 
    from CONTENT 
    where version='1' and contenttype='page' or contenttype='comment' or contenttype='blogpost' or contenttype='mail' or contenttype='drafts' 
    group by CONTENT.contenttype;"); 

// execute query 
$result = mysql_query($query) or die ("Error in query: $query. ".mysql_error()); 

// create a php array and echo it as json 
//$row = mysql_fetch_assoc($result); 
//echo json_encode($row); 


$results = array(); while ($row = mysql_fetch_assoc($result)) { $results[] = $row; } 
echo json_encode($results); 
?> 

Answer 1

第一个问题，怎么样你有数据吗？到一个高层图将要接受的格式（即数组的数组，[[name，percent]，[nextname，percent]等]）？我会在你的PHP处理这个问题：

<snip> 

// execute query 
$result = mysql_query($query) or die ("Error in query: $query. ".mysql_error()); 

$total = 0; 
$results = array(); 

while ($row = mysql_fetch_assoc($result)) { 
    $results[$row["contenttype"] = $row["count()"]; 
    $total += $row["count()"]; 
} 

$forHigh = array(); 
foreach ($results as $k => $v) { 
    $forHigh[]=array($k,($v/$total) * 100); // get percent and push onto array 
} 

echo json_encode($forHigh); // this should be an array of array 

现在，我们的JSON返回的结构是准备HighCharts，我们只需要我们的JSON调用后调用一次情节创作创造的情节。我会在$ .ajax调用的成功回调中执行此操作。

$.ajax({ 
    url: 'hc1.php', 
    success: function(jsonData) { 
     chart = new Highcharts.Chart({ 
     <snip> 
       series: [{ 
        type: 'pie', 
        name: 'Content', 
        data: jsonData 
       }] 
     <snip> 
    }, 
    cache: false 
});