Highcharts柱状图不显示动态值 - Highcharts Column Chart Not Displaying Dynamic Values

Highcharts Column Chart Not Displaying Dynamic Values

本文关键字：显示动态 Highcharts | 更新日期: 2023-09-27

嗨，我需要创建一个动态列图。但我不能把我的值值的数据字段，我怎么能做到这一点

 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"}]

Thanks in Advance

首先，在第18行更改

finaldata += currentItem;

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

看到JSFilddle。

编辑:使用Sebastian在评论中的建议。谢谢!

下面是将highchart代码保存在$中的工作版本。getJSON回调函数。

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

$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
            }],
    });
    });
}