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]
   ]];

最初のデータ ポイントに NULL 値がある限り、グラフは見栄えがします。3 本のバーは目盛りの中心に完全に配置されています。jsFiddle を参照してください。

[データの変更] ボタンをクリックして、最初のデータ ポイントの値がゼロである 2 番目のデータ セットを読み込みます。3 本のバーが移動するため、中央に配置されなくなり、x 軸上にあるはずの場所から遠く離れています。

2 番目のデータ セットを使用すると、バーが正しい目盛の中央に配置されないのはなぜですか? そして、どうすればこれを修正できますか?

編集:AngularJSが関与していない場合、これは私にとって完全に機能します。jsFiddle を参照してください: http://jsfiddle.net/juliejones/fC3zs/1/

前もって感謝します！

4

3 に答える 3

1

xaxis で alignTicksWithAxis: 1, ディレクティブを使用できます。これにより、値がバーに揃えられます。

これが実用的なフィドルです：http://jsfiddle.net/u8csX/

実際に整列していることを確認するためだけに、2 番目のデータ セットにいくつかのデータ ポイントを追加しました。ラベルのスペースを増やしたい場合は、labelWidth / labelHeight プロパティを変更できます。私はあなたのyaxisをより見やすくするフィドルでもそれをしました。

また、API は非常に役立ちます。http://flot.googlecode.com/svn/trunk/API.txt

于 2013-04-08T05:49:09.527 に答える