我确信这个答案必须是显而易见的,但我可以't seem to find the answer anywhere. I have a chart which I am generating using krispo' s 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]];
}
});
}]);
})();
是否有一些我错过的刷新功能会重绘整个情节?
谢谢,马特
1 回答
Soooo ......事实证明这很简单 . angular-nvd3通过观察
options
对象并通过scope.api.refresh()
刷新api来处理此问题 . 因此,要更新轴标签,我只需添加以下代码来调整menuOptions
数组,使其看起来像可能是一个更好的方法来做到这一点,但这是有效的 .
谢谢,马特