中学受験専門 理科総合研究所 −理総研−

フロントページへ
Name:
Pass:
RSS
: ユーザー登録はコチラ :
左 理総研:技術情報と開発メモ 右

017:jqPlot pointLabelsのnullの誤表示を防ぐ

対象言語:JavaScript / jQuery / jqPlot
キーワード:JavaScript jQuery jqPlot pointLabels 値 数値 表示 ズレ replot() null データ ポイント
理総研Web内ではユーザーの成績や各中学校の塾別合格者数の視認性を高めるために、jQueryのUIグラフプラグインであるjqPlotを利用してグラフの生成をしています。
グラフ内に数値も表記 - pointLabels:{show:true} - するとき、すべてのポイントに数値があるなら何も問題はないのですが、数値に「null(データ無し)」がある場合に次のような誤表示が発動します。国内にも海外にも関連文献が見当たらない、この現象は自分だけなのか...。
青と橙の2つのグラフはどちらにもnullが入力されており、そのためにX軸の途中から始まっています。
この問題の発生条件を精査したわけではありませんが、上の画像の「誤」を見ていただく通り、
  • 数値の表示とは裏腹にグラフの形(Y軸)は正しい
のです。つまり処理されている数値は正常なのでロードのタイミングは問題となりません。なおページをリロードしても修復されません。データ無しはnull以外に指定のしようがないのに、なぜに左詰めにしやがるか。
さて困ったな...と少し悩んでカチカチやっていたら、プラグイン[jqplot.cursor.js]のzoom機能を使った瞬間、急に空が晴れ渡るかのように突然正常な表示に戻りました。
なるほど、「 replot() 」か...。
というコトで解決した(再描画するだけなので根本的な解決ではないし処理が増えるだけとしても)ので、もしかしたら同じような悩みを抱えておられる方のために以下を記します。

$(document).ready(function() {

	// nullを含むデータ
	var t0 = [null,92,91,95,92];
	var t1 = [null,null,66,57,45];

	plot1 = $.jqplot('usergraph', [ t0,t1 ], {

		axes: {
			// なんかイロイロ
		},

		legend: {
			// なんかイロイロ
		},

		seriesDefaults: {
			pointLabels: { show: true, location: 'e' }
		},

		series: [
			// なんかイロイロ
		]

	});

	// ↓コレ追加するだけ。 //
	plot1.replot();

});


著者 You Mizuguchi
© 2011 System-iDO IT Devisers