Question

我确信这个答案必须明显，但我似乎无法在任何地方找到答案。我有一个图表，我使用krispo angular-nvd3生成的图表实时显示数据（类似于找到的实时示例here）。在我的应用程序中，我使用右键单击上下文菜单来更改当前显示的数据集。到目前为止，它运作良好。但是，我不确定如何更新轴标签，以便正确指示正在显示的数据。控制器的代码如下：

(function() {
   angular.module('main').controller('mainPasCtlr', ['$scope', 'Data', 
                                     function($scope, Data) {

        var index = 0;
        var labels = ['Q','IA','f0', 'abs'];

        $scope.menuOptions =[['Q', function(){index = 0;}],
                             ['IA', function(){index = 1;}],
                             ['f0', function(){index = 2;}],
                             ['abs', function(){index = 3;}]];

        $scope.options = {
            chart : {type : 'lineChart',
                     height : 180,
                     margin : { top : 20,
                                right : 20,
                                bottom : 40,
                                left : 75
                     },
            x : function(d) {
                    return d.x;
                },
            y : function(d) {
                    return d.y;
                },
            useInteractiveGuideline : true,

            transitionDuration : 0,
            yAxis : { showMaxMin: false,
                      axisLabel: labels[index],
                      tickFormat : function(d) {return d3.format('.02f')(d); }
                    },
            xAxis : { axisLabel: 'Time',
                      tickFormat : function(d) { return d3.time.format('%X'(new Date(d)); }
                    }
           },
           title: { enable: false,
                    text: labels[index] + ' vs Time'
                  }
       };

       $scope.data = [ { values : [], key : 'Cell 1 '},
                       { values : [], key : 'Cell 2 '},
                       { values : [], key : 'Cell 3 '},
                       { values : [], key : 'Cell 4 '},
                       { values : [], key : 'Cell 5 '},
                      ];

       $scope.run = true;

       $scope.$on('dataAvailable', function() {

           for (var i = 0; i < 5; i++) {
               $scope.data[i].values = Data.pas.cell[i][labels[index]];
           }

        });

    }]);
})();

是否有一些我错过的刷新功能会重绘整个情节？

谢谢，马特

Answer 1

Soooo ......结果证明这很简单。 angular-nvd3通过观察options对象并通过scope.api.refresh()刷新api来处理此问题。因此，要更新轴标签，我只需添加以下代码来调整menuOptions数组，使其看起来像

$scope.menuOptions =    [['Q', function(){
                                          index = 0;
                                          $scope.options.chart.yAxis.axisLabel = labels[index];
                                         }
                        ],
                        ['IA', function(){  
                                                  index = 1;
                                                  $scope.options.chart.yAxis.axisLabel = labels[index];
                                            }
                        ],
                        ['f0', function(){  
                                          index = 2;
                                          $scope.options.chart.yAxis.axisLabel = labels[index];
                                            }
                                ],
                        ['abs', function(){ 
                                                   index = 3;
                                                   $scope.options.chart.yAxis.axisLabel = labels[index];
                                            }
                        ]];

可能是一种更好的方法，但这很有效。

谢谢，马特

使用角度在NVD3图表上实时更改轴标签

1 个答案: