相关疑难解决方法(0)

如何在x轴上显示nvd3/d3.js的日期?

我正在使用nvd3,但我认为这是关于时间尺度和格式的一般d3.js问题.我创建了一个简单的例子来说明问题(参见下面的代码):

如果我省略了针对xAxis的.tickFormat,它可以在没有日期格式的情况下正常工作.通过下面的示例我得到错误:

未捕获的TypeError:对象1326000000000没有方法'getMonth'

nv.addGraph(function() {

    var chart = nv.models.lineChart();

    chart.xAxis
         .axisLabel('Date')
         .rotateLabels(-45)
         .tickFormat(d3.time.format('%b %d')) ;

     chart.yAxis
         .axisLabel('Activity')
         .tickFormat(d3.format('d'));

     d3.select('#chart svg')
         .datum(fakeActivityByDate())
       .transition().duration(500)
         .call(chart);

     nv.utils.windowResize(function() { d3.select('#chart svg').call(chart) });

     return chart;
});

function days(num) {
    return num*60*60*1000*24
}

/**************************************
 * Simple test data generator
 */

function fakeActivityByDate() {
    var lineData = [];
    var y = 0;
    var start_date = new Date() - days(365); // One year ago

    for (var i = 0; i < 100; i++) {
        lineData.push({x: new Date(start_date + …
Run Code Online (Sandbox Code Playgroud)

d3.js nvd3.js

50
推荐指数
2
解决办法
5万
查看次数

在xAxis上使用datetype时,NVD3折线图错误地与网格对齐

我目前正在使用Angular Directive(angular-nvd3)处理NVD3.我有一个非常简单的折线图,数据非常简单.

我现在遇到的问题是我的数据错误地与Axis对齐.示例plunker可在此处获取:http://plnkr.co/edit/jWEYt6?p = preview ,

我在我的xAxis上使用日期,使用d3库解析:

tickFormat: function(d) {return d3.time.format('%d/%m')(new Date(d))}
Run Code Online (Sandbox Code Playgroud)

描述:

我希望xAxis标签与网格对应.

在示例中,您可以清楚地注意到xAxis没有均匀分布(值:06/11,08/11,11/11,13/11).通常2天,有时3天:)

更糟糕的是 - 峰值与网格不匹配.示例:06/11 tick实际上甚至不接近网格线,我猜它应该是.

我也尝试过master's来自repo的代码,它也发生在那里.HTML头部分中有一个链接.

我的数据,正确的日期格式或其他问题是否有问题?谢谢!

javascript angularjs nvd3.js angular-nvd3

3
推荐指数
1
解决办法
2216
查看次数

标签 统计

nvd3.js ×2

angular-nvd3 ×1

angularjs ×1

d3.js ×1

javascript ×1