来自http

时间:2016-01-15 13:28:41

标签: angularjs nvd3.js

使用此示例plnkr ndv3 pie chart。它绘制了带有静态数据的图表,因为我硬编码但远程数据没有应用到图表,我可以在日志中看到它。这是配置

angular.module('codesApp.charts', ['nvd3'])
    .controller('ChartCtrl', function ($scope, $http) {

        $scope.options = {
            chart: {
                type: 'pieChart',
                height: 500,
                x: function (d) {
                    return d.key;
                },
                y: function (d) {
                    return d.y;
                },
                showLabels: true,
                duration: 500,
                labelThreshold: 0.01,
                labelSunbeamLayout: true,
                legend: {
                    margin: {
                        top: 5,
                        right: 35,
                        bottom: 5,
                        left: 0
                    }
                }
            }
        };

        $scope.data = [
            {
                "key": "DIRTYPE",
                "y": 15
            },
            {
                "key": "PL_TYPE",
                "y": 5
            }
        ];
        d3.json("./rest/codes/chartData", function (data1) {
            $scope.data = data1;
            console.log($scope.data);
        });
    });

1 个答案:

答案 0 :(得分:2)

由于您使用d3获取数据,因此需要告知角度$scope已发生变化。您可以通过$appy来电:

d3.json("./rest/codes/chartData", function (data1) {
    $scope.$apply(function(){
       $scope.data = data1;
    });       
});

或者像我们一样使用angular $http

$http.get("./rest/codes/chartData").then(function(response){
  $scope.data = response.data;
});