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/
前もって感謝します!