Question

我正在使用angular-nvd3-directives（http://cmaurer.github.io/angularjs-nvd3-directives/line.chart.html）

模板中的HTML是：

<nvd3-line-chart  
  data="graphData"  
  id="exampleId"  
  interactive="true"  
  tooltips="true"  
  showXAxis="true"  
  showYAxis="true"  
  yAxisLabel="Riders"       
  margin="{left:75,top:20,bottom:45,right:30}"  
  xAxisTickFormat="xAxisTickFormat"  
  xAxisTickValues="xAxisTicks"  
  x="xFunction()"  
  color="routeColour()"  
  legendColor="routeColour()"  
  showLegend="true"  
  >  
  <svg></svg>  
</nvd3-line-chart>

控制器中的js（此处省略了图例功能，但有效）：

  $scope.graphData =[{  
    key: "R1",  
    values: [["2014-1-1", 200], ["2014-1-2", 250]]  
  },  
  {  
    key: "R2",  
    values: [["2014-1-1", 300], ["2014-1-2", 350]]  
  }]  

  $scope.xAxisTicks = function(){  
    return [new Date('2013-12-31'), new Date('2014-1-1'), new Date('2014-1-2'), new Date('2014-1-3')];  
  }  

  $scope.xAxisTickFormat = function(d){  
    if((typeof d)=="number")  
      return d3.time.format('%Y-%m-%d')(moment.unix((d/1000)).toDate());  
    else  
      return d3.time.format('%Y-%m-%d')(d);  
  }  

  $scope.xFunction = function(){  
    return function(d){  
      return d3.time.format("%Y-%m-%d").parse(d[0]);           
    };  
  }

图表显示正确，但x轴未按预期在1月31日至1月3日的范围内展开。 X轴从1月1日开始到1月2日结束。我也尝试使用forcex，但是没有用。任何想法将不胜感激谢谢！

angular-nvd3：X轴上的强制日期范围

0 个答案: