Angularjs 来自http的nvd3图表数据

使用此示例。当我硬编码时，它用静态数据绘制图表，但是远程数据没有应用到图表中，我可以在日志中看到它。这里是配置

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);
        });
    });

---

由于您使用

d3

获取数据，因此需要告诉angular，

$scope

已更改。您可以通过电话：

或者像这样使用：

---

d3.json

不会让AngularJS检查更改。您需要在回调的末尾添加

$scope.$apply（）

，作为

d3.json

@LoremIpsum的第二个参数传递。是的，从答案中学到了这一点，谢谢

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

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