带有 AngularJS 的 Flot 条形图：条形不与刻度对齐答案

【问题标题】：Flot bar chart with AngularJS: bars not lining up with ticks带有 AngularJS 的 Flot 条形图：条形不与刻度对齐
【发布时间】：2013-04-08 04:27:02
【问题描述】：

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

提前致谢！

【问题讨论】：

标签： jquery angularjs flot

【解决方案1】：

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

这是一个有效的小提琴：http://jsfiddle.net/u8csX/

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

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

【讨论】：

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

【解决方案2】：

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

在我更改的指令中：

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

到：

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

和（在“栏”下）被删除：

align: 'center'

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

【讨论】：

【解决方案3】：

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

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

【讨论】：