Question

我想使用highcharts显示一个条形图。我在play框架（play-java）中开发了一个应用程序，其中我从java api返回一个包含json格式数据的响应。它包含一个字段'name '包含'数据'，'小工具'，'其他'等数据。我希望图表的x轴从json数组中获取这些值，并在响应中返回。

以下是.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轴的'名称'和百分比图表的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);
    })

无论如何，谢谢......

如何将json数组数据提取到angularjs中的highcharts中

1 个答案: