Question

我是使用nvd3.js的新手，我在使用x轴显示的时间戳方面遇到了麻烦。不知何故，nvd3.js从收到的时间戳数据中跳过一些日期。就像在图片中一样，nvd3跳过日期11/16/2015。

var chart;
nv.addGraph(function() {
    chart = nv.models.stackedAreaChart()
          .margin({
            left: 70,
            bottom: 70
          })
          .x(function(d) { return d[0] })   
          .y(function(d) { return d[1] })   
          .useInteractiveGuideline(false)   
          .rightAlignYAxis(true)
          .showControls(true)       
          .clipEdge(true)
          .options({
                transitionDuration: 500,    
                useInteractiveGuideline: false
            });
    chart.xAxis
        .tickFormat(function (d) {
            return d3.time.format('%x')(new Date(d))
        });
    chart.yAxis.tickFormat(d3.format(',.0f'));
    chart.color(['rgb(63, 127, 191)', 'rgba(63, 63, 191, 0.9)', 'rgba(63, 63, 191, 0.7)', 'rgba(127, 63, 191, 0.7)', 'rgba(63, 191, 191, 0.9)', 'rgba(71, 177, 183, 0.68)']);

    chart.legend.vers('furious');

    d3.select('#chart1')
        .datum(histcatexplong)
        .transition().duration(1000)
        .call(chart)


    nv.utils.windowResize(chart.update);
    return chart;
});

NVD3 skip a date

我试过这个： d3.js nvd3 date on x axis: only some dates are show 但不适用于我的情况。

这些是我传递的数据：

var histcatexplong = [
    {
        "key" : "Visit" ,
        "values" : [[1447804800000, 551], [1447718400000, 566], [1447632000000, 525], [1447545600000, 454], [1447459200000, 444], [1447372800000, 501], [1447286400000, 473], [1447200000000, 562]]
    } ,
    {
        "key" : "Search" ,
        "values" : [[1447804800000, 425], [1447718400000, 432], [1447632000000, 410], [1447545600000, 346], [1447459200000, 345], [1447372800000, 392], [1447286400000, 396], [1447200000000, 423]]
    } ,
    {
        "key" : "Redirected" ,
        "values" : [[1447804800000, 104], [1447718400000, 103], [1447632000000, 975], [1447545600000, 832], [1447459200000, 840], [1447372800000, 940], [1447286400000, 944], [1447200000000, 103]]
    } ,
    {
        "key" : "Booking" ,
        "values" : [[1447804800000, 41], [1447718400000, 41], [1447632000000, 37], [1447545600000, 29], [1447459200000, 32], [1447372800000, 44], [1447286400000, 37], [1447200000000, 42]]
    } ,
    {
        "key" : "Payment selected" ,
        "values" : [[1447804800000, 31], [1447718400000, 32], [1447632000000, 30], [1447545600000, 23], [1447459200000, 26], [1447372800000, 29], [1447286400000, 30], [1447200000000, 32]]
    } ,
    {
        "key" : "Issued" ,
        "values" : [[1447804800000, 25], [1447718400000, 31], [1447632000000, 30], [1447545600000, 18], [1447459200000, 21], [1447372800000, 29], [1447286400000, 30], [1447200000000, 26]]
    }
];

Answer 1

您总是可以在xAxis中使用函数tickValues（）添加x值吗？这样，您可以传递应显示为x轴标签的值数组。像这样：

var x_labels = [1136005200000, ... , 1138683600000];

chart.xAxis
    .tickValues(x_labels)

请不要忘记格式化！

查看文档：{{3}}

NVD3时间戳x轴跳过一些日期

1 个答案: