nvd3 和 angular - 无法修复轴值答案

【问题标题】：nvd3 and angular - Unable to fix axis valuesnvd3 和 angular - 无法修复轴值
【发布时间】：2016-06-29 15:19:09
【问题描述】：

我正在尝试使用angular-nvd3 开发一个多图表。

图表工作正常，我可以获取数据并显示我需要的值。我现在遇到的问题是，我想在x-axis 上显示一些特定的值，但由于某种原因我不能。

这是我目前得到的：http://codepen.io/NickHG/pen/rLWNea?editors=1010

图表选项如下：

chart: {
   type: 'multiChart',
   height: 450,
   margin: {
      top: 10,
      right: 40,
      bottom: 60,
      left: 30
      },
   useInteractiveGuideline: false,
   transitionDuration: 10,
   style: 'expand',
   tooltip: {
       keyFormatter: function(d, i) {
       return "Test";
       }
     },
   zoom: {
      enabled: true
     },
   xScale: x_scale,
   xAxis: {
     ticks: 14,
     domain: [0, 14],
     axisLabel: '',
     tickFormat: function(d) {
        return d3.time.format('%H:%M')(new Date(d * 1000));
      }
     },
    Axis1: {
        axisLabel: '',
        axisLabelDistance: -100
     }
 }

我想要实现的是每小时从00:00 to 23:00 开始的 X 轴（我也尝试过，但没有运气：how to use d3.time.scale to create label for each hour of day and each day of week）

x 轴的想法是我应该能够显示小时、天或周，但我想一旦我正确理解了如何显示小时，我应该能够弄清楚自己如何在不同的格式。

感谢您的帮助

【问题讨论】：

在您的笔中，您需要做的就是更改为 24 个滴答声...chart.xAxis .scale(xAxisScale()) .ticks(24) .tickFormat(d3.time.format("%H:%M"));。见edited pen。
如果您想将此作为答案，我可以选择它

标签： angularjs d3.js nvd3.js angular-nvd3

【解决方案1】：

你几乎一直在那里。您只需在笔中修改 x 轴上的刻度数，从 6 到 24....

nv.addGraph(function() {         
      chart = nv.models.multiChart()    
      chart.margin({"left":5,"right":5,"top":10,"bottom":20})
      chart.showLegend = true
      chart.xAxis
           .scale(xAxisScale())
           .ticks(24)   //--> changed from .ticks(6)
           .tickFormat(d3.time.format("%H:%M"));

见Updated pen。干杯！

【讨论】：