Question

我希望使用StackedAreChart使用nvd3.js来显示网络流量。我需要在X轴上显示每小时的刻度：00：00 01:00 02:00 ... 24:00。我该怎么做？
reference the StackedAreaChart in this page

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

Answer 1

底层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显示了一个正在使用的示例。

Answer 2

默认情况下，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)) });

如何在StackedAreChart中使用nvd3.js进行xAxis每小时滴答（如0,1,2，...，23）？

2 个答案: