0

我正在使用 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/

提前致谢！

4

3 回答 3

1

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

这是一个工作小提琴：http://jsfiddle.net/u8csX/

向第二个数据集添加了更多数据点，以验证它确实对齐。如果您想为标签提供更多空间，则可以修改 labelWidth / labelHeight 属性。我在小提琴中也这样做了，这使您的 yaxis 更加明显。

API 也很有帮助：http://flot.googlecode.com/svn/trunk/API.txt

于 2013-04-08T05:49:09.527 回答
0

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

在我更改的指令中：

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

至：

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

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

align: 'center'

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

于 2013-04-08T22:15:53.390 回答
0

我认为您的问题可能与此有关： angular.js 指令中的浮点图表具有零维度

使用 'E' on 指令会给出错误的大小信息来浮动，请改用 'A'。

于 2013-05-12T21:54:29.783 回答