我在 Flask 中使用 NVD3,并且在 x 轴上有日期。
如您所见,x 轴上的线与点不重合。我在 x 轴上打印出日、月、年和小时。我不明白为什么日期不等距,即即使我的 x 轴数据是“小时”也不相同,因此这些线相距超过“24 小时”。我认为这是造成问题的原因。
(已编辑)
我的代码是:
nv.addGraph(function() {
var chart = nv.models.lineChart();
chart.xAxis
.tickFormat(function(d) { return d3.time.format('%d %b %Y')(new Date(parseInt(d))) }
);
chart.yAxis
.tickFormat(d3.format(',.02f'));
chart.tooltipContent(function(key, y, e, graph) {
var x = d3.time.format('%d %b %Y')(new Date(parseInt(graph.point.x)));
var y = String(graph.point.y);
var y = String(graph.point.y);
tooltip_str = '<center><b>'+key+'</b></center>' + y + ' on ' + x;
return tooltip_str;
});
chart.showLegend(true);
d3.select('#lineChart svg')
.datum(data_lineChart)
.transition().duration(500)
.attr('width', 1200)
.attr('height', 450)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
最佳答案
这里有一个更好的建议,因为 d3 如果未将日期声明为时间刻度,则它不能很好地缩放由日期表示的 x 轴。
chart.xAxis
.tickFormat(function(d) {
return d3.time.format('%d-%m-%y')(new Date(d))
});
chart.xScale(d3.time.scale()); //fixes misalignment of timescale with line graph
关于d3.js - x 轴日期与 nvd3 中的 y 轴数据不对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19690432/