Question

我正在使用nvd3饼图来显示文件夹中整个文件的大小。我的问题是如何在每次数据更新发生后更新图表的标题（例如，显示标题中的整体大小。我尝试使用范围中的对象，该对象使用当前大小进行更新，但它不会在图表的标题选项中更新）

这是我的代码：

app.controller("chartCtrl", function($scope, foldersSrvc){

$scope.options = {
    chart: {
        type: "pieChart",
        height: 400,
        showLabels: true,
    labelType: "value",
    title: "Content(" + $scope.filesSize + ")",
        labelSunbeamLayout: true,
        x: function(d){return d.type;},
    y: function(d){return d.size;},
        donut: true
    }
};

foldersSrvc.getFiles("server").then(function(data){
$scope.data = data;
$scope.filesSize = foldersSrvc.getFilesSize(data);
});

$scope.$on('folderClicked', function(event, args){
foldersSrvc.getFiles(args.id).then(function(data){
  $scope.data = data;
  $scope.filesSize = foldersSrvc.getFilesSize(data);
});
})
})

Answer 1

我推荐使用nvd3的角度包装器，angular-nvd3来支持数据绑定。

angular.module('myApp', ['nvd3'])
.controller('myCtrl', function($scope){

    /* Chart options */
    $scope.options = { /* JSON data */ };

    /* Chart data */
    $scope.data = { /* JSON data */ }

})

HTML

<div ng-app="myApp">
    <div ng-controller="myCtrl">
        <nvd3 options="options" data="data"></nvd3>
    </div>
</div>

如何在angular-nv3d饼图中更新标题选项

1 个答案: