如何在StackedAreChart中使xAxis每小时刻度（如0,1,2，...，23）使用nvd3.js？

我想用StackedAreChart使用nvd3.js来显示网络流量。我需要在X轴上显示每小时的勾号：00：00 01:00 02:00 ... 24:00。我怎么做？
reference the StackedAreaChart in this page 如何在StackedAreChart中使xAxis每小时刻度（如0,1,2，...，23）使用nvd3.js？

nv.addGraph(function() { 
      var chart = nv.models.stackedAreaChart() 
      .x(function(d) { return d[0] }) 
      .y(function(d) { return d[1] }) 
      .clipEdge(true) 
      .useInteractiveGuideline(true) 
      ; 
    chart.xAxis 
    .showMaxMin(false) 
    //.ticks(d3.time.hour,2) //I wrote this line，but is does not work 
    .tickFormat(function(d) { return d3.time.format('%H:%M')(new Date(d)) 

          }); 



    chart.yAxis.tickFormat(d3.format(',.2f')); 

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

    nv.utils.windowResize(chart.update); 

    return chart; 
});

来源

2015-04-30 tao4yu

NVD3默认计算图表上显示刻度的适量。如果您尝试在小图上添加大量的蜱（例如，您想要的24个蜱），结果将是一个混乱，丑陋的图表。因此，如果图表很小，例如，nvd3可以每三小时创建一个刻度。

你真的应该让nvd3为你选择刻度数。您不需要每小时滴答，您需要适合图表中正确数量的滴答。但如果你真的想添加24个刻度，你可以做这样的事情（我没有测试它，但我认为它会工作 - 也许不是0,1,2，...但是的确如此与24小时蜱）：

chart.xAxis 
    .ticks(24) 
    .tickFormat(function(d) { return d3.time.format("%H:%M")(new Date(d)) });

来源

2015-05-04 16:48:27 RenatoUtsch

我试过这个，但它不起作用： chart.xAxis.ticks（24）。 tickFormat（function（d）{return d3.time.format（'％H：％M'）（new Date（d））}）; – tao4yu

结果如何？ – RenatoUtsch

结果没有改变 – tao4yu

基础D3尝试通过选择要显示的蜱的数量有帮助。

您可以通过使用raw D3's tickValues()来覆盖此行为，因为您总是知道它们是什么（0-23），在您的情况下它有意义且应该是安全的。

chart.xAxis 
     .tickFormat(function (d) { 
      return d3.time.format("%H:%M")(new Date(d)) 
     }) 
     .tickValues(
      [ 
      Number(new Date(2015, 01, 24, 00)), 
      Number(new Date(2015, 01, 24, 01)), 
      Number(new Date(2015, 01, 24, 02)), 
      Number(new Date(2015, 01, 24, 03)), 
      Number(new Date(2015, 01, 24, 04)), 
      Number(new Date(2015, 01, 24, 05)), 
      Number(new Date(2015, 01, 24, 06)), 
      Number(new Date(2015, 01, 24, 07)), 
      Number(new Date(2015, 01, 24, 08)), 
      Number(new Date(2015, 01, 24, 09)), 
      Number(new Date(2015, 01, 24, 10)), 
      Number(new Date(2015, 01, 24, 11)), 
      Number(new Date(2015, 01, 24, 12)), 
      Number(new Date(2015, 01, 24, 13)), 
      Number(new Date(2015, 01, 24, 14)), 
      Number(new Date(2015, 01, 24, 15)), 
      Number(new Date(2015, 01, 24, 16)), 
      Number(new Date(2015, 01, 24, 17)), 
      Number(new Date(2015, 01, 24, 18)), 
      Number(new Date(2015, 01, 24, 19)), 
      Number(new Date(2015, 01, 24, 20)), 
      Number(new Date(2015, 01, 24, 21)), 
      Number(new Date(2015, 01, 24, 22)), 
      Number(new Date(2015, 01, 24, 23)) 
      ] 
     )

然后为了使它们合适，您可以添加.rotateLabels(-45)。

This Plunk显示了它正在使用的一个例子。

来源

2015-05-06 02:04:13 Lucas

如何在StackedAreChart中使xAxis每小时刻度（如0,1,2，...，23）使用nvd3.js？

回答

相关问题