Chart.jsで円グラフが表示できない

JavaScript jquery

作成中の時間計測サービスで、今まで計測した時間を円グラフで表示するためにChart.jsを使ってみました。www.chartjs.org

しかし、いざ使ってみると円グラフが表示されなく、なかなか原因が特定できなかったため、スタックオーバーフローで質問したところ、下記のような回答を得て解決しました。ja.stackoverflow.com

Chartというオブジェクトを初期化する際、canvasという要素のoffsetWidthやoffsetHeightが必要ですが、pagebeforeshowというイベントが引き起こされる時にはjQuery Mobileのスタイルによってdisplayがnoneなので、ブラウザはoffsetWidthやoffsetHeightを計算できません。

ですから、pagebeforeshowをpageshowに置き換えると、正しく動くと思います。

pagebeforeshowイベントで円グラフデータを作成し表示していたのですが、pageshowイベントに変更したところ円グラフが表示されました。
しかし、ここで分からない点が３点ありました。

  1. Chartオブジェクト初期化時にcanvasのoffsetWidth, offsetHeightが必要。
  2. pagebeforeshowイベント発生時にはdisplayがnoneなのでoffsetWidth, offsetHeightを計算できない。

ということで一体どんなことなのか調べてみました。

Chartオブジェクト初期化時にcanvasのoffsetWidth, offsetHeightが必要

Chart.jsのvar Chart = function(context) {...}を調べたところ、下記のようなコードがありました。

//Variables global to the chart
var computeDimension = function(element,dimension)
{
	if (element['offset'+dimension])
	{
		return element['offset'+dimension];
	}
	else
	{
		return document.defaultView.getComputedStyle(element).getPropertyValue(dimension);
	}
}

var width = this.width = computeDimension(context.canvas,'Width');
var height = this.height = computeDimension(context.canvas,'Height');

ここでoffsetWidth, offsetHeightを取得していますね。
それらが初期化時に取得できない場合は別の値を返していますが、これではうまくいっていないのでしょうか。。。

pagebeforeshowイベント発生時にはdisplayがnoneなのでoffsetWidth, offsetHeightを計算できない

調査中。