删除 nvd3 中刻度之间的 space
Remove space between ticks in nvd3
追问：
简而言之：
The problem I have encountered now is that my data is wrongly aligned with the Axis
问题
当我一天（或更多天）没有数据时，图表 "save" 为缺失的一天提供一个位置。我想避免它。
我知道我可以使用 0s 添加缺失的一天的数据，但我的问题是如果没有它我是否可以这样做。
var app = angular.module('plunker', ['nvd3']);
app.controller('MainCtrl', function($scope) {
$scope.options = {
chart: {
type: 'lineChart',
height: 500,
useInteractiveGuideline: true,
xAxis: {
tickFormat: function(d) {
return d3.time.format('%H %d/%m')(new Date(d));
},
rotateLabels: -45,
tickValues: function(values) {
var a = _.map(values[0].values, function(v) {
return new Date(v.x);
});
return a;
}
}
}
};
$scope.data = [
// date, series1, series2, series
[1446418800000, 2, 2, 1],
[1446505200000, 0, 0, 0],
[1446591600000, 14, 12, 2],
[1446678000000, 65, 38, 27],
[1446764400000, 11, 6, 5],
// [1446850800000, 0, 0, 0],
// [1446937200000, 0, 0, 0],
[1447023600000, 6, 4, 2],
[1447110000000, 0, 0, 0],
[1447196400000, 0, 0, 0],
[1447282800000, 0, 0, 0],
[1447369200000, 12, 2, 10],
[1447455600000, 0, 0, 0],
[1447542000000, 0, 0, 0],
[1447628400000, 0, 0, 0],
[1447714800000, 1, 0, 1]
];
var graphData = function(data, labels, colors) {
var series = [];
// first(0) value is date
for (var i = 1; i < data[0].length; i++) {
var values = [];
for (var j = 0; j < data.length; j++) {
values.push({
x: data[j][0], // x is date
y: data[j][i] // y is value
});
}
series.push({
values: values, // graph data
key: labels[i - 1], // the label
color: colors[i - 1] // color of series
});
}
return series;
};
$scope.graphData = graphData($scope.data, ['One', 'Two', 'Three'], ['#6C6C6C', '#2ca02c', '#E43211']);
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>Angular-nvD3 Line Chart</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css"/>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="https://cdn.rawgit.com/novus/nvd3/master/build/nv.d3.js"></script>
<script src="https://rawgit.com/krispo/angular-nvd3/v1.0.3/dist/angular-nvd3.js"></script>
<script data-require="lodash.js@1.3.1" data-semver="1.3.1" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/1.3.1/lodash.min.js"></script>
</head>
<body ng-controller="MainCtrl">
<nvd3 options="options" data="graphData" class="with-3d-shadow with-transitions"></nvd3>
</body>
</html>
恐怕我在这里没有完整的答案，但既然你按照我上一个问题的答案，我会描述一下后果。
出现问题是因为您自己提供了tickValues。如果删除自定义函数，轴将使用它的默认函数并产生（我们称之为）均匀分布的刻度：
因此，您应该修复的地方是 tickValues 函数。在我看来，向它添加逻辑以使其产生均匀分布的滴答声会很麻烦，但并非不可能（而且我可以想到几种方法来做到这一点）。但是仍然（imo）在这种情况下最好在服务器端进行。
祝你好运！
var app = angular.module('plunker', ['nvd3']);
app.controller('MainCtrl', function($scope) {
$scope.options = {
chart: {
type: 'lineChart',
height: 500,
useInteractiveGuideline: true,
x: function(d){ return d.i},
xAxis: {
tickFormat: function(d) {
var data = $scope.graphData[0].values[d].x;
return d3.time.format('%H %d/%m')(new Date(data));
},
rotateLabels: -45,
tickValues: function(values) {
var a = _.map(values[0].values, function(v,i) {
return i
});
return a;
},
showMaxMin: false
}
}
};
$scope.data = [
// date, series1, series2, series
[1446418800000, 2, 2, 1],
[1446505200000, 0, 0, 0],
[1446591600000, 14, 12, 2],
[1446678000000, 65, 38, 27],
[1446764400000, 11, 6, 5],
// [1446850800000, 0, 0, 0],
// [1446937200000, 0, 0, 0],
[1447023600000, 6, 4, 2],
[1447110000000, 0, 0, 0],
[1447196400000, 0, 0, 0],
[1447282800000, 0, 0, 0],
[1447369200000, 12, 2, 10],
[1447455600000, 0, 0, 0],
[1447542000000, 0, 0, 0],
[1447628400000, 0, 0, 0],
[1447714800000, 1, 0, 1]
];
var graphData = function(data, labels, colors) {
var series = [];
// first(0) value is date
for (var i = 1; i < data[0].length; i++) {
var values = [];
for (var j = 0; j < data.length; j++) {
values.push({
i: j,
x: data[j][0], // x is date
y: data[j][i] // y is value
});
}
series.push({
values: values, // graph data
key: labels[i - 1], // the label
color: colors[i - 1] // color of series
});
}
return series;
};
$scope.graphData = graphData($scope.data, ['One', 'Two', 'Three'], ['#6C6C6C', '#2ca02c', '#E43211']);
console.log($scope.graphData);
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>Angular-nvD3 Line Chart</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css"/>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script> -->
<script src="https://cdn.rawgit.com/novus/nvd3/master/build/nv.d3.js"></script>
<script src="https://rawgit.com/krispo/angular-nvd3/v1.0.3/dist/angular-nvd3.js"></script>
<script data-require="lodash.js@1.3.1" data-semver="1.3.1" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/1.3.1/lodash.min.js"></script>
<!--<script src="app.js"></script>-->
</head>
<body ng-controller="MainCtrl">
<nvd3 options="options" data="graphData" class="with-3d-shadow with-transitions"></nvd3>
</body>
</html>
追问
简而言之：
The problem I have encountered now is that my data is wrongly aligned with the Axis
问题
当我一天（或更多天）没有数据时，图表 "save" 为缺失的一天提供一个位置。我想避免它。
我知道我可以使用 0s 添加缺失的一天的数据，但我的问题是如果没有它我是否可以这样做。
var app = angular.module('plunker', ['nvd3']);
app.controller('MainCtrl', function($scope) {
$scope.options = {
chart: {
type: 'lineChart',
height: 500,
useInteractiveGuideline: true,
xAxis: {
tickFormat: function(d) {
return d3.time.format('%H %d/%m')(new Date(d));
},
rotateLabels: -45,
tickValues: function(values) {
var a = _.map(values[0].values, function(v) {
return new Date(v.x);
});
return a;
}
}
}
};
$scope.data = [
// date, series1, series2, series
[1446418800000, 2, 2, 1],
[1446505200000, 0, 0, 0],
[1446591600000, 14, 12, 2],
[1446678000000, 65, 38, 27],
[1446764400000, 11, 6, 5],
// [1446850800000, 0, 0, 0],
// [1446937200000, 0, 0, 0],
[1447023600000, 6, 4, 2],
[1447110000000, 0, 0, 0],
[1447196400000, 0, 0, 0],
[1447282800000, 0, 0, 0],
[1447369200000, 12, 2, 10],
[1447455600000, 0, 0, 0],
[1447542000000, 0, 0, 0],
[1447628400000, 0, 0, 0],
[1447714800000, 1, 0, 1]
];
var graphData = function(data, labels, colors) {
var series = [];
// first(0) value is date
for (var i = 1; i < data[0].length; i++) {
var values = [];
for (var j = 0; j < data.length; j++) {
values.push({
x: data[j][0], // x is date
y: data[j][i] // y is value
});
}
series.push({
values: values, // graph data
key: labels[i - 1], // the label
color: colors[i - 1] // color of series
});
}
return series;
};
$scope.graphData = graphData($scope.data, ['One', 'Two', 'Three'], ['#6C6C6C', '#2ca02c', '#E43211']);
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>Angular-nvD3 Line Chart</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css"/>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="https://cdn.rawgit.com/novus/nvd3/master/build/nv.d3.js"></script>
<script src="https://rawgit.com/krispo/angular-nvd3/v1.0.3/dist/angular-nvd3.js"></script>
<script data-require="lodash.js@1.3.1" data-semver="1.3.1" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/1.3.1/lodash.min.js"></script>
</head>
<body ng-controller="MainCtrl">
<nvd3 options="options" data="graphData" class="with-3d-shadow with-transitions"></nvd3>
</body>
</html>
恐怕我在这里没有完整的答案，但既然你按照我上一个问题的答案，我会描述一下后果。
出现问题是因为您自己提供了tickValues。如果删除自定义函数，轴将使用它的默认函数并产生（我们称之为）均匀分布的刻度：
因此，您应该修复的地方是 tickValues 函数。在我看来，向它添加逻辑以使其产生均匀分布的滴答声会很麻烦，但并非不可能（而且我可以想到几种方法来做到这一点）。但是仍然（imo）在这种情况下最好在服务器端进行。
祝你好运！
var app = angular.module('plunker', ['nvd3']);
app.controller('MainCtrl', function($scope) {
$scope.options = {
chart: {
type: 'lineChart',
height: 500,
useInteractiveGuideline: true,
x: function(d){ return d.i},
xAxis: {
tickFormat: function(d) {
var data = $scope.graphData[0].values[d].x;
return d3.time.format('%H %d/%m')(new Date(data));
},
rotateLabels: -45,
tickValues: function(values) {
var a = _.map(values[0].values, function(v,i) {
return i
});
return a;
},
showMaxMin: false
}
}
};
$scope.data = [
// date, series1, series2, series
[1446418800000, 2, 2, 1],
[1446505200000, 0, 0, 0],
[1446591600000, 14, 12, 2],
[1446678000000, 65, 38, 27],
[1446764400000, 11, 6, 5],
// [1446850800000, 0, 0, 0],
// [1446937200000, 0, 0, 0],
[1447023600000, 6, 4, 2],
[1447110000000, 0, 0, 0],
[1447196400000, 0, 0, 0],
[1447282800000, 0, 0, 0],
[1447369200000, 12, 2, 10],
[1447455600000, 0, 0, 0],
[1447542000000, 0, 0, 0],
[1447628400000, 0, 0, 0],
[1447714800000, 1, 0, 1]
];
var graphData = function(data, labels, colors) {
var series = [];
// first(0) value is date
for (var i = 1; i < data[0].length; i++) {
var values = [];
for (var j = 0; j < data.length; j++) {
values.push({
i: j,
x: data[j][0], // x is date
y: data[j][i] // y is value
});
}
series.push({
values: values, // graph data
key: labels[i - 1], // the label
color: colors[i - 1] // color of series
});
}
return series;
};
$scope.graphData = graphData($scope.data, ['One', 'Two', 'Three'], ['#6C6C6C', '#2ca02c', '#E43211']);
console.log($scope.graphData);
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>Angular-nvD3 Line Chart</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css"/>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script> -->
<script src="https://cdn.rawgit.com/novus/nvd3/master/build/nv.d3.js"></script>
<script src="https://rawgit.com/krispo/angular-nvd3/v1.0.3/dist/angular-nvd3.js"></script>
<script data-require="lodash.js@1.3.1" data-semver="1.3.1" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/1.3.1/lodash.min.js"></script>
<!--<script src="app.js"></script>-->
</head>
<body ng-controller="MainCtrl">
<nvd3 options="options" data="graphData" class="with-3d-shadow with-transitions"></nvd3>
</body>
</html>