如何在angularjs中将json数组数据获取到高图

Question

我想使用highcharts显示条形图。我正在开发一个在play framework（play-java）中的应用程序，其中我从java api返回一个包含json格式数据的响应。它包含一个字段``name''，其中包含我希望图表的x轴从json数组中获取这些值，以作为响应返回这些数据，例如“ Data”，“ Gadgets”，“ Others”等。

这是.js中响应的代码

for(var i=0;i<response.data.result.length;i++)
        {
            $scope.total=$scope.total+parseInt(response.data.result[i].item_price);
        }
        var j=0;
    console.log(response.data.result);
            while(j<response.data.result.length)
            {
                $scope.jsonArray=[{
                    name:response.data.result[j].category_name,
                    y: (parseInt(response.data.result[j].item_price)/$scope.total)*100,

                }]
                $scope.renderChart();
            }

条形图的代码

$scope.renderChart = function()
{
    Highcharts.chart('container', {
        chart: {
            type: 'column'
        },
        title: {
            text: 'Your Expenses'
        },
        subtitle: {
            text: 'Your total spent money is '+$scope.total+'.'
        },
        xAxis: {
            type: 'category'
        },
        yAxis: {
            title: {
                text: 'Money spent in percentage'
            }

        },
        legend: {
            enabled: false
        },
        credits: {
            enabled: false
            },
        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                    format: '{point.y:.1f}%'
                }
            }
        },

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

        series: [{
            name: 'Categories',
            colorByPoint: true,
            data:$scope.jsonArray
         }]
    });
}

我知道我不能在提到的响应代码中使用while循环。这就是我在寻求帮助的地方.y轴应计算百分比值。我想为x轴生成'names'，为y轴生成百分比图表。谢谢。

Answer 1

我们要做的就是在循环之前将jsonArray初始化为空。添加一个for循环，以便遍历数组并适当地分配值。 更改后的代码

$scope.jsonArray = [];
            for(var i=0;i<response.data.result.length;i++)
            {
                $scope.jsonArray[i]={
                    name:response.data.result[i].category_name,
                    y: (parseInt(response.data.result[i].item_price)/$scope.total)*100,

                }
                $scope.renderChart();
                console.log(response.data.result[i]);
            }

    console.log($scope.jsonArray);
    })

还是谢谢你....