Jquery 带AngularJS的Flot条形图：不带刻度线的条形图

我正在使用AngularJS和Flot绘制条形图：

参见JSFIDLE：

该指令：

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

只要第一个数据点有一个空值，图表就很好看。这三条线完全在刻度上居中。请参阅jsFiddle

单击“更改数据”按钮加载第二组数据，第一个数据点的值为零。这三个条会移动，因此它们不再居中，现在离x轴上应该位于的位置很远

为什么在使用第二组数据时，条形图没有居中于正确的刻度上？我怎样才能纠正这个问题

编辑：当AngularJS不参与时，这对我来说非常有效。参见JSFIDLE：

---

提前谢谢

您可以使用xaxis中的alignTicksWithAxis:1指令。这将使您的值与条形图对齐

这是一把小提琴：

http://jsfiddle.net/u8csX/

在第二个数据集中添加了更多的数据点，只是为了验证它是否确实对齐。如果需要更多的标签空间，则可以修改labelWidth/labelHeight属性。我在小提琴上也这样做了，这让你的雅克西斯更加明显

---

API也非常有用：

http://flot.googlecode.com/svn/trunk/API.txt

我已经解决了我自己的问题

在指令中，我更改了：

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

---

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

我认为您的问题可能与此有关：

---

使用“E”on指令会给flot提供错误的大小信息，请改用“A”。

谢谢您的回复，但alignTicksWithAxis不是只有在您有两个y轴时才有用吗？一个在左边，一个在右边？无论如何，这似乎对我的处境没有帮助。第二组数据仍然没有以刻度为中心。在第一组数据中，值为5的条形图以“Sa 6”为中心。在第二组数据中，该条位于“Fr 5”的右侧。

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

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

align: 'center'