Still Laughin'

結局、原因は自分がヘボいだけでした。 orz

「jqPlot with jQuery UI」のページでは、2番目以降のタブ内に描かれたグラフを replot するために、以下のようなコードが提示されていました。

$('#tabs').bind('tabsshow', function(event, ui) {
if (ui.index == 1 && plot1._drawCount == 0) {
plot1.replot();
}
else if (ui.index == 2 && plot2._drawCount == 0) {
plot2.replot();
}
});

自分の場合はタブが４つあるので、こんな風に変更しました。

$('#tabs').bind('tabsshow', function(event, ui) {
if (ui.index == 1 && plot1._drawCount == 0) {
plot1.replot();
} else if (ui.index == 2 && plot2._drawCount == 0) {
plot2.replot();
} else if (ui.index == 3 && plot3._drawCount == 0) {
plot3.replot();
} else if (ui.index == 4 && plot4._drawCount == 0) {
plot4.replot();
}
})

ところがこれだと４番目のタブ内のグラフが表示されないのです。

タブを指定してページを開く方法を調べていたら、マニュアルに「ui.index // 選択された（クリックされた）タブの0から始まるインデックス」と書いてあります。
そこで、下記のように変更したら４つのタブ内の全てのグラフが表示できました。

$('#tabs').bind('tabsshow', function(event, ui) {
if (ui.index == 1 && plot2._drawCount == 0) {
plot2.replot();
} else if (ui.index == 2 && plot3._drawCount == 0) {
plot3.replot();
} else if (ui.index == 3 && plot4._drawCount == 0) {
plot4.replot();
}
});

「jqPlot with jQuery UI」の例では、１番目のタブ内にはグラフはなく、２番目と３番目にグラフがあるので、タブとグラフの番号のズレに気がつかなかったんですね。

さらに、jQuery 関係のファイルの読み込みを整理したおかげで、jqPlotの表示も安定しました。　これなら実用に耐えます。

ちなみに jqPlot で軸の目盛り間隔を指定するには、 tickInterval を指定すればいいようです。