javascript - Highcharts 金字塔图表使用 JSON、PHP 显示无数据

Question

在 Highcharts 中使用 JSON 和金字塔图时，我在控制台日志中没有收到任何错误，但没有显示任何数据。

我有charts.php，其结果是这样的:

{"success":1,"data":[{"name":"John Spoon","data":300}, {"name":"Dave Jones","data":200},{"name":"Other","data":500}]}

这是我尝试过的，没有返回任何数据。

<div id="chart"  style=
                        "height:600px;width:100%;"></div>

<script>
$(function () {
    $("#chart").html("Loading Activity Log Graph...");

    var options = {
        chart: {
            type: 'pyramid',
            renderTo: 'chart',
            marginRight: 100
        },
        title: {
            text: 'Activity',
            x: -50
        },
        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b> ({point.y:,.0f})',
                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
                    softConnector: true
                }
            }
        },
        legend: {
            enabled: false
        },
        name: 'Activity Count',
        series: [{}]
   };

    $.ajax({
        url: "charts.php",
        type:'post',
        dataType: "json",
        success: function(data){
            options.series = data.data;
            var chart = new Highcharts.Chart(options);          
        }
    });

}); 
</script>

这是我想要的结果，在不使用 JSON 的情况下显示: http://jsfiddle.net/0dyy44hz/

我需要更改什么才能显示数据？

Answer 1

查看pyramid example ，数据必须采用单个系列的形式，每个数据点都是 [name, value] 数组。您有两个选择，更改 PHP 以输出正确的格式或修改 JavaScript 中的 PHP 输出。由于您没有发布 PHP 代码，我将稍后发布:

var data = {"success":1,"data":[{"name":"John Spoon","data":300}, {"name":"Dave Jones","data":200},{"name":"Other","data":500}]};    

options.series = [{
    data: $.map(data.data, function(i){ // loop outputted data
        return [[i.name, i.data]]; // coerce into an array of [name,value]
    })
}];

这是一个工作 example .