Question

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

参见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个酒吧完美地瞄准他们的蜱虫。见jsFiddle。

单击“更改数据”按钮以加载第一组数据，该数据在第一个数据点中具有零值。这三个条移动，因此它们不再居中，现在它们不在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();

和（在'bars'下）已删除：

align: 'center'

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

Answer 3

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

使用'E'on指令给flot提供了错误的大小信息，改为使用'A'。

使用AngularJS绘制条形图：不与蜱排列的条形图

3 个答案: