x轴日期不与nvd3中的y轴数据对齐 [英] x-axis dates don't align with y-axis data in nvd3

问题描述

我使用NVD3与Flask，我有日期在x轴。

如您所见x轴上的线不与点重合。我在x轴上打印出日，月，年和小时。我不明白为什么日期不是等间距，即小时是不一样的，即使我的x轴数据，使得行超过24小时分开。我认为这是造成问题的原因。

（编辑）
我的代码是：

  nv.addGraph（function（）{
 var chart = nv.models.lineChart（）; 
 chart.xAxis 
 .tickFormat 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 ，1200）
 .attr（'height'，450）
 .call（chart）; 
 
 nv.utils.windowResize（chart.update）; 
返回图表; 
}）; 
  

解决方案

我所做的是创建一个排序的时间戳列表，用作x轴上的数据，并将它们转到最近的日期。然后我强制NVD3使用这个数据作为间隔，而不是自动生成的间隔通过执行：

  chart.xAxis 
 .tickValues（{{x_data}}）
  

其中x_data是列表。瞧！ ...

I am using NVD3 with Flask and I have dates on the x-axis.

As you can see the lines on x-axis don't coincide with the points. I printing out the day, month, year and hours on the x-axis. I don't understand why the dates are not equally spaced i.e the 'hours' are not the same even though my x-axis data is, so that the lines are more than "24 hrs" apart. I think this is causing the problem.

(Edited) My code is:

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;
                });

解决方案

Ok, got it! What I do is I create a sorted list of timestamps which are to be used as data on the x-axis and round them to the nearest day. Then I force NVD3 to use this data as intervals instead of the auto-generated intervals by doing:

 chart.xAxis
     .tickValues({{x_data}})

where x_data is the list. And voila ! ...

这篇关于x轴日期不与nvd3中的y轴数据对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！