Highcharts饼图无法加载

时间:2015-07-20 09:29:52

标签: javascript php jquery json highcharts

我正在尝试使用高级图表创建饼图。我通过PHP以及系列获取数据库中的所有值,这些值通过JSON发送到jQuery,我在其中解析JSON并将其传递给创建图形的函数。

$query = [array('name'=>'SAP', 'id'=>48), array('name'=>'EIS', 'id'=>65), array('name'=>'P2P', 'id'=>84), array('name'=>'Portal Gift Card', 'id'=>92), array('name'=>'Tenants Survey', 'id'=>74), array('name'=>'Outros', 'id'=>17)];
            $series = array('name' => 'Effort');
            $seriesData = array();
            foreach ($query as $data){
                $rslt = $this->gm->getEffortApp($data['id']);
                array_push($seriesData, array('name' => $data['name'], 'y' => $rslt));
            }
            $series['data'] = $seriesData;
            echo json_encode($series, JSON_NUMERIC_CHECK);

这是获取数据并通过JSON将其发送到jQuery的代码。

$(document).ready(function(){
    var param = '<?=$graphdata['param']?>';
    asyncCall('post', '?/graphAsync/getSeries/'+<?=$graphdata['graph_id']?>,{param: param}, 'text',function(data){                                              //returns the right array to populate the graph
        var series = $.parseJSON(data);
        setChartData($('#graph'+<?=$graphdata['id']?>), '<?=$graphdata['graph_type']?>', '<?=$graphdata['graph_title']?>', 'Teste', '<?=$graphdata['graph_titleY']?>', series);
    });      
}); 

这是接收所有图形数据并解析JSON字符串的代码。

function setChartData(elem, type, title, categories, titleY, series){
elem.highcharts({
    chart: {
        type: type
    },
    title: {
        text: title
    },
    xAxis: {
        categories: categories
    },
    yAxis: {
        min: 0,
        title: {
            text: titleY
        },
        stackLabels: {
            enabled: true,
            style: {
                fontWeight: 'bold',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
            }
        }
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            dataLabels: {
                enabled: true,
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'white',
                style: {
                    textShadow: '0 0 3px black'
                }
            }
        },
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                style: {
                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                }
            }
        }
    },
    series: series,
    credits: {
        enabled: false
    }
});
}

这是创建图表的功能。

其余的图形数据来自控制器负载(CodeIgniter),似乎没问题。

服务器的输出(JSON字符串)如下:

[{"name":"SAP","y":9420.35},{"name":"EIS","y":2282.5},{"name":"P2P","y":218.5},{"name":"Portal Gift Card","y":203},{"name":"Tenants Survey","y":323},{"name":"Outros","y":1}]

系列函数中的输入是这样的:

series=[object,object,object,object,object,object]

每个对象如下:

object:[name:'something', y:*number*]

图表只有标题和导出按钮才会加载空白。 出于某种原因,我无法发布图像,这就是为什么我没有放置图形输出的任何图像。

提前感谢。

编辑:这是jsfiddle,虽然由于某种原因我无法像在localhost中那样工作。这基本上就是我正在做的事情,而是我通过PHP变量传递参数。

0 个答案:

没有答案