Question

您好我需要创建一个动态柱形图。但是我无法将我的值放到有价值的数据字段中我该怎么做

 function getusercategorygraph()
{
$.getJSON('config/alumniusermodes.php',function(data){ 
        // Create a new array
        var finaldata = [];
        var chart;

        // Perform your operations
        $.each(data, function( index, value ) {
            // Create a new hash
            var currentItem = {}

            // Create the proper values in your hash
            $.each(value, function( index, value ) {
                currentItem[index] = value;  

            });            
                finaldata += currentItem;

         });
        var chart = new Highcharts.Chart({        
            chart: {              
                renderTo : 'user-count',
                type: 'column',                    
            },
            title: {                                                
                text: 'Alumni Users By Category Analytics'
            },                                            
            xAxis: {
                color:'#0077CC',
                //type: 'category',
                categories: []
            },
            yAxis: {
                title: {
                    text: 'Total Number of Alumni Members'
                }

            },
            legend: {
                enabled: false
            },
            plotOptions: {
                series: {
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true,
                        format: '{point.y} Members'
                    }
                }
            },

            tooltip: {
                headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y} Members</b><br/>'
            },

            series: [{
                name: "Alumni Type",
                colorByPoint: true,
                //data: [{ name : 'Standard',  y : 52, },{ name : 'Silver',  y : 24, },{ name : 'Gold',  y : 20, },{ name : 'Platinum',  y : 6, },]
                //data: [{ name : 'Standard',  y : 52, },{ name : 'Silver',  y : 24, },{ name : 'Gold',  y : 20, },{ name : 'Platinum',  y : 6, },]
                data : finaldata,
            }],
        }); 
    });
}

但图表没有显示任何内容。这段代码有什么不对。请帮忙。这是我得到的api的结果

[{"name":"Standard","y":"52"},{"name":"Silver","y":"24"},{"name":"Gold","y":"20"},{"name":"Platinum","y":"6"}]

先谢谢

Answer 1

为了帮助您入门，请在第18行更改

finaldata += currentItem;

到

finaldata.push({
    name: currentItem.name,
    y: parseFloat(currentItem.y)
});

请参阅JSFilddle。

编辑：塞巴斯蒂安在评论中使用的建议。谢谢！

Answer 2

这是将高图代码保存在$ .getJSON回调函数中的工作版本。

我添加了以下PHP后端代码以获取高清示例数据。

$data[] = array('name' => 'Standard', 'y'=> 52);
$data[] = array('name' => 'Silver', 'y'=> 24);
$data[] = array('name' => 'Gold', 'y'=> 20);
$data[] = array('name' => 'Platinum', 'y'=> 6);
echo json_encode($data);
exit;

这些数据只是给我在highchart中使用的数据。以下是javascript调用以使其正常运行。

getusercategorygraph();
function getusercategorygraph()
{
    $.getJSON('http://<mydomain>/getdata.php',function(data){
    var chart = new Highcharts.Chart({
            chart: {
                renderTo : 'container',
                type: 'column',
            },
            title: {
                text: 'Alumni Users By Category Analytics'
            },
            xAxis: {
                color:'#0077CC',
                //type: 'category',
                categories: []
            },
            yAxis: {
                title: {
                    text: 'Total Number of Alumni Members'
                }

            },
            legend: {
                enabled: false
            },
            plotOptions: {
                series: {
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true,
                        format: '{point.y} Members'
                    }
                }
            },

            tooltip: {
                headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat:'<span style="color:{point.color}">{point.name}</span>:<b>{point.y}Members</b><br/>'
            },

            series: [{
                name: "Alumni Type",
                colorByPoint: true,
                data: data
            }],
    });
    });
}

Highcharts柱形图不显示动态值

2 个答案: