Question

我从图表服务中提取数据。拉出的数据有2个我希望在y轴之间切换的属性（ someData 和 someOtherData ）。我的想法是，基于我父控制器中的点击事件，图表将在y轴上显示不同的属性（ someData 或 someOtherData ）：

y: function(d){ return $scope.mode === '1' ? d.someData : d.someOtherData; }

这是我指令的控制器。如果每次要在属性之间切换时重新获取数据，下面的代码将只执行我想要的操作：

 controller: function($scope, Chart) {
        $scope.data = [];
        $scope.data = Chart.testPortfolio(); // I only want data to be fetched once as it doesn't changes

        $scope.update = function() {
            //$scope.data = Chart.testPortfolio();  <-- if this line is uncommented it works, but I don't want to fetch data on every click event
            $scope.pieOptions = {
                chart: {
                    type: 'pieChart',
                    height: 400,
                    x: function(d){ return d.name; },
                    y: function(d){ return $scope.mode === '1' ? d.someData : d.someOtherData; },
                    showLabels: false,
                    labelThreshold: 0.01
                }
            };
        }
        $scope.update();

        // this listens to my click event for switching
        $scope.$on('some-event', function(e, args) {
            $scope.mode = args.mode;
            $scope.update();
        });
    }

这是指令的html：

<nvd3 options='pieOptions' data='data'></nvd3>

如何重新绘制/更新图表，而不必在每次要切换y轴属性时重新获取数据？

Answer 1

我提出了以下解决方案，它更像是 hack 。如果您有更好的建议，请告诉我们：

        controller: function($scope, Chart, $interval) {
        $scope.data = [];
        $scope.pieOpts = {
            chart: {
                type: 'pieChart',
                height: 400,
                x: function(d){ return d.name; },
                y: function(d){ return $scope.mode === '1' ? d.someValue: d.someOtherValue; },
                showLabels: false,
                labelThreshold: 0.01
            }
        };

        $scope.data = Chart.testPortfolio();

        $scope.$on('some-event', function(e, args) {
            if(args.mode !== $scope.mode) {
                $scope.mode = args.mode;

                var tempData = angular.copy($scope.data.reverse());

                $interval(function () {
                    $scope.data = [];
                    while((a=tempData.pop()) != null){
                        $scope.data.push(a);
                    }
                }, 1, true);
            }
        });
    }

NVD3 - 数据不变时重绘/刷新图表

1 个答案: