html5jpのグラフ描画ライブラリでレーダーチャートを書こうと思うのですが、IE6(WinXP)でうまく描画してくれません。

グラフのラベルは正しい位置に描画されるんですが、グラフの本体の位置が大きくずれてしまいます。
標準準拠モードで正しく表示するにはどうしたらよいのでしょうか?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="prototype.js" type="text/javascript"></script>
<script src="excanvas.js" type="text/javascript"></script>
<script src="radar.js" type="text/javascript"></script>
<title>タイトル</title>
</head>
<body>
<p>戻る</p>
<p>戻る</p>
<p>戻る</p>
<p>戻る</p>
<p>戻る</p>

<div><canvas height="300" id="chart" width="300"></canvas></div>
<script type="text/javascript">
window.onload = function() {
var rc = new html5jp.graph.radar("chart");
if( ! rc ) { return; }
var records = [["点数", 3.0, 4.0, 5.0, 4.0, 3.0]];
var options = {aLineWidth: 0,
aMax: 5,
faceColors: ["#FF0000"],
aCap: ["軸A", "軸B", "軸C", "軸D", "軸E"],
legend: false};
rc.draw(records, options);
};
</script>
</body>
</html>

回答の条件
  • 1人2回まで
  • 登録:2008/08/26 13:40:29
  • 終了:2008/09/02 13:45:02

回答(1件)

id:GoldenDawn No.1

GoldenDawn回答回数426ベストアンサー獲得回数812008/08/27 22:25:21

ポイント60pt

とりあえず div と canvas のスタイルで position を指定してみました。

<div style="position:relative;">
  <canvas height="300" id="chart" width="300" style="postion:absolute;top:0;">
  </canvas>
</div>
id:tak-n

ありがとうございます!

とりあえず、divタグにスタイルをつけただけでうまく表示されるようになりました。

理屈はよくわかりませんが、IEのバグなんでしょうかね。

2008/08/29 10:38:07
  • id:GoldenDawn
    IE8βにいたるまで (今のところ) 、canvas 要素は実装されておらず、
    excanvas で力業で実現しているようなものなのでバグと言ってしまうのは可愛そうな気もします。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません