来自 http 的 nvd3 图表数据

Question

使用了这个样本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);
        });
    });

Answer 1

由于您使用 d3 获取数据，因此您需要告诉 angular $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;
});

来自 http 的 nvd3 图表数据

nvd3 chart data from http

angularjs

nvd3.js