我正在使用 NVD3 显示许多折线图，并希望能够获得当前显示的 xAxis 的最小值和最大值。在这种情况下，xAxis 显示时间值。
当切换图表中线条的可见性时，通过单击图例标签，日期范围会发生变化。我添加了一个事件处理程序来收听 legendClicks，但我如何才能掌握新呈现的日期范围？
问问题
407 次
1 回答
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
}
]
}
]
当我走到这一步时，客户改变了主意，不想要需要这个解决方案的功能。希望它可能对其他人有用。
于 2015-09-02T10:16:22.330 回答