与AngularJS海军报条形图：酒吧没有排队蜱

Question

我使用AngularJS和海军报绘制一个条形图：

见的jsfiddle：http://jsfiddle.net/juliejones/DwMwJ/3/

的指令：

App.directive('barChart', function(){ 
return{ 
    restrict: 'E', 
    link: function(scope, elem, attrs){ 

     var weekday=new Array(); 
     weekday[0]="Su"; 
     weekday[1]="Mo"; 
     weekday[2]="Tu"; 
     weekday[3]="We"; 
     weekday[4]="Th"; 
     weekday[5]="Fr"; 
     weekday[6]="Sa"; 

     var options = { 
      bars: { 
       show: true, 
       barWidth: 1000 * 60 * 60 * 24 * 0.7, 
       align: 'center' 
      }, 
      colors: ["#F90"], 
      xaxis: { 
       mode: 'time', 
       tickSize: [1, 'day'], 
       minTickSize: [1, 'day'], 
       tickFormatter: function (val, axis) { 
        var d = new Date(val); 
        return weekday[d.getUTCDay()] + '<br />' + d.getUTCDate(); 
       } 
      }, 
      yaxis: { 
       minTickSize: 1, 
       tickDecimals: 0, 
       min: 0 
      } 
     }; 
     var chart = null; 

     scope.$watch(attrs.ngModel, function(v){ 
      if(!chart){ 
       chart = $.plot(elem, v , options); 
       elem.show(); 
      }else{ 
       chart.setData(v); 
       chart.setupGrid(); 
       chart.draw(); 
      } 
     }); 
    } 
}; 
}); 

数据（除第一项的值相同外）：

var data1 = [[ 
    [1364774400000, ], 
    [1365206400000, 5], 
    [1365292800000, 2], 
    [1365379200000, 2] 
    ]]; 

var data2 = [[ 
    [1364774400000, 0], 
    [1365206400000, 5], 
    [1365292800000, 2], 
    [1365379200000, 2] 
    ]]; 

图表外观很好，只要第一个数据点有一个空值。 3个酒吧完美地对准他们的蜱。看到j​​sFiddle。

单击“更改数据”按钮以加载第一个数据点中具有零值的第二组数据。三根钢筋移动，因此它们不再居中，并且现在远离它们应该在x轴上的位置。

为什么在使用第二组数据时，条形图不会集中在正确的刻度上？我该如何纠正这一点？

编辑：这对AngularJS不参与时完美适合我。见jsFiddle：http://jsfiddle.net/juliejones/fC3zs/1/

在此先感谢！

Answer 1

您可以在xaxis中使用alignTicksWithAxis：1指令。这将使你的值与你的酒吧保持一致。

这里是工作提琴：http://jsfiddle.net/u8csX/

增加了一些更多的数据点，第二数据刚刚成立，以验证它确实对齐。如果您需要更多空间用于标签，那么您可以修改labelWidth/labelHeight属性。我在小提琴中也做到了这一点，这使得你的yaxis更加明显。

另外，API是非常有帮助的：http://flot.googlecode.com/svn/trunk/API.txt

Answer 2

我已经解决了我的问题......

在指令中，我改变：

return weekday[d.getUTCDay()] + '<br />' + d.getUTCDate(); 

到：

return weekday[d.getDay()] + '<br />' + d.getDate(); 

和（在“酒吧”下）删除：

align: 'center' 

现在，当从一个数据集更改为另一个数据集时，x轴标签保持原位。

Answer 3

我认为你的问题可能与此有关： flot chart in angular.js directive has zero dimensions

使用的指令中的“E”给出错误的大小信息，以海军报，用“A”代替。