angularjs-nvd3，指令線圖蜱不起作用

Question

我cmaurer nvd3指令工作，angularjs，你可以看到它here

我想改變x軸蜱數到3（開始，中間，結束日期），但nvd3滴答屬性（xaxisticks，xaxistickvalues）不起作用。

我甚至試圖使用unix時間戳，但沒有成功。 有什麼想法？

 <nvd3-line-chart 
      ... 
      xAxisTickFormat="xAxisTickFormatFunction()" 
      yAxisTickFormat="yAxisTickFormatFunction()" 
      xaxistickvalues="xAxisTickValuesFunction()" // not work 
      xaxisticks="3" // not work 
      showXAxis="true" 
      showYAxis="true" 
      interactive="true" 
      ... 
      forcey="[]" 
      > 
      <svg></svg> 
     </nvd3-line-chart> 

Answer 1

似乎在nvd3所有線路圖有蜱硬編碼，因此任何蜱設置被忽略：

xAxis 
     .scale(x) 
     .ticks(availableWidth/100) 
     .tickSize(-availableHeight, 0); 

在這裏看到：https://github.com/novus/nvd3/issues/70。令人遺憾的是，它似乎需要它開展工作才能解決這個問題，或者等到版本2.0發佈後，希望能夠解決這個問題。

Answer 2

不是一個完美的解決方案，但是是一個快速更改，可以大部分消除重複。在創建時添加一個蜱的緩存，並且由於它們是按順序創建的，因此可以消除順序詛咒。

controller: function($scope) { 
     var vm = this; 

     vm.xAxisTick = ""; // <- cache the x-axis ticks here... 
     vm.x2AxisTick = ""; // <- cache the x2-axis ticks here... 

     vm.options = { 
      chart: { 
       type: 'lineWithFocusChart', 

       xAxis: { 
        scale: d3.time.scale(), 
        tickFormat: function(d) { 
         var tick = moment.unix(d).format('h:mm a'); 

         // compare tick versus the last one, 
         // return empty string if match 
         if (vm.xAxisTick === tick) { 
          return ""; 
         } 

         // update our latest tick, and pass along to the chart 
         vm.xAxisTick = tick; 
         return tick; 
        }, 
        rotateLabels: 30, 
        showMaxMin: false 
       }, 

       x2Axis: { 
        scale: d3.time.scale(), 
        tickFormat: function(d) { 
         var tick = moment.unix(d).format('h:mm a'); 

         // compare tick versus the last one, 
         // return empty string if match 
         if (vm.x2AxisTick === tick) { 
          return ""; 
         } 

         // update our latest tick, and pass along to the chart 
         vm.x2AxisTick = tick; 
         return tick; 
        }, 
        rotateLabels: 30, 
        showMaxMin: false      
       }, 

       yAxis: { 
        axisLabel: 'Why', 
        axisLabelDistance: 30, 
        rotateYLabel: false 
       } 

      } 
     };