我正在使用NVD3显示多个折线图,并希望能够获得当前显示的xAxis的最小值和最大值。在这种情况下,xAxis显示时间值。
在切换图表中线条的可见性时,通过单击图例标签,可以更改日期范围。我添加了一个事件处理程序来收听legendClicks但是如何获得新渲染的日期范围呢?
答案 0 :(得分:1)
我最终使用自定义函数在单击图例时查找x轴的最小值/最大值。我将函数包装在$ timeout内,以便等待摘要周期完成以获得正确的值,即:
legend: {
dispatch: {
legendClick: function(e) {
$timeout(function(){
getMinMax();
}, 0);
}
}
},
getMinMax
函数是一个快速而肮脏的函数,并且最有可能以更优雅的方式完成,但是它可以完成它的工作:
var getMinMax = function(){
var maxVal, minVal = null;
for(var i=0;i<$scope.data.length;i++) {
// Only displayed should be considered
if (!$scope.data[i].disabled) {
var tempMinVal = d3.max($scope.data[i].values, function(d) { return d.x;} );
var tempMaxVal = d3.min($scope.data[i].values, function(d) { return d.x;} );
minVal = (!minVal || tempMinVal < minVal) ? tempMinVal : minVal;
maxVal = (!maxVal || tempMaxVal > maxVal) ? tempMaxVal : maxVal;
}
}
return [minVal, maxVal];
};
将以此格式从数据中获取最小值和最大值:
[
{
"key": "AA",
"values": [
{
"x": 1440712800000,
"y": "6",
"series": 0
},
{
"x": 1440712800000,
"y": "6",
"series": 0
}
]
},
{
"key": "BB",
"values": [
{
"x": 1441144800000,
"y": "3",
"series": 1
},
{
"x": 1443045600000,
"y": "3",
"series": 1
},
{
"x": 1453244400000,
"y": "3",
"series": 1
},
{
"x": 1454022000000,
"y": "3",
"series": 1
}
]
},
{
"key": "CC",
"values": [
{
"x": 1442872800000,
"y": "5",
"series": 2
},
{
"x": 1442872800000,
"y": "5",
"series": 2
}
]
},
{
"key": "DD",
"values": [
{
"x": 1443650400000,
"y": "1",
"series": 3
},
{
"x": 1443650400000,
"y": "1",
"series": 3
}
]
},
{
"key": "EE",
"values": [
{
"x": 1444773600000,
"y": "9",
"series": 4
},
{
"x": 1446073200000,
"y": "9",
"series": 4
}
]
}
]
当我达到目前为止,客户改变了主意,并且不想要需要此解决方案的功能。希望它可能对其他人有用。