我需要更改y轴位置,即最小位置位于顶部,最大位置位于底部。所以nvd3图表将向下移动到最新值
我需要的一切都在这个链接中。
http://jsfiddle.net/8fh8qLs0/8/
在此示例中图表上升,因为最大值在顶部如何更改所以最大值在底部,
这里是代码
angular.module('myApp', ['nvd3'])
.controller('myCtrl', function($scope) {
$scope.options = {
chart: {
type: 'lineChart',
height: 450,
margin: {
top: 20,
right: 20,
bottom: 40,
left: 60
},
// x: function(d){ return new Date(d.x).toISOString(); },
x: function(d) {
return d.x;
}, //
//xScale: d3.time.scale,
y: function(d) {
return d.y;
},
useInteractiveGuideline: true,
transitionDuration: 1,
isArea: false,
useInteractiveGuideline: true,
xAxis: {
tickFormat: function(d) {
return d3.format('.02f')(d);
},
},
yAxis: {
axisLabel: 'Time (ms)',
tickFormat: function(d) {
return d3.time.format('%H:%M:%S')(new Date(d));
}
},
callback: function(chart) {
console.log("!!! lineChart callback !!!");
console.log(chart.yAxis.scale().domain());
},
interactiveLayer: {
tooltip: {
gravity: 's',
classes: 'gravity-s'
}
},
x2Axis: {
showMaxMin: false,
},
y2Axis: {
showMaxMin: false,
tickFormat: function(d) {
var date = new Date(new Date().setDate(new Date().getDate() + d));
return d3.time.format('%b %d')(date);
}
},
legend: {
margin: {
top: 8,
right: 0,
bottom: 32,
left: 0
},
rightAlign: true
}
}
};
$scope.data = [{
values: [],
key: 'Random Walk'
}];
$scope.run = true;
var x = 0;
setInterval(function() {
if (!$scope.run) return;
$scope.data[0].values.push({
x: Math.random(),
y: Date.now(), //* (Math.random() > 0.95) ? 10: 1
});
if ($scope.data[0].values.length > 70) {
$scope.data[0].values.shift();
}
x++;
$scope.$apply();
//chart.update();
}, 1000);
});
提前致谢。