プロが教えるわが家の防犯対策術！

ひとつのHTMLファイル内にcanvasでグラフを2つ表示したいのです

締切済

  • 質問者：jueves
  • 質問日時：
  • 回答数：2件

ひとつのHTMLファイル内にcanvasでグラフを2つ表示したいのですが
表示できなくて困っています。
以下のサイトを参考に、それぞれ1つのファイルに1つのグラフを表示はできました。
http://www.html5.jp/library/index.html

また、グラフを上下入れ替えると後に書いたほうが有効になるようです。
どうしたら表示できるようになるか、わかる方アドバイスをお願いします。

以下headタグ以降をそのまま引用です。

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja"/> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>グラフ</title> <link href="sample_graph.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="rendering-mode.js"></script>
<!--[if IE]><script type="text/javascript" src="./html5jp/excanvas/excanvas.js"></script><![endif]-->
<script type="text/javascript" src="./html5jp/graph/circle.js"></script>
<script type="text/javascript" src="./html5jp/graph/radar.js"></script>

<script type="text/javascript">
window.onload = function() {
var rc = new html5jp.graph.radar("sample_radar");
if( ! rc ) { return; }
var items_radar = [ ["商品A", 3, 3, 2, 3, 1] ];
var params_radar = { aCap: ["A", "B","C", "D", "E"], aMax: 3, aMin: 0, legend: false } ;
rc.draw(items_radar, params_radar); };
</script>

<script type="text/javascript">
window.onload = function(){
var cg = new html5jp.graph.circle("sample_circle");
if( ! cg ) { return; }
var items1 = [ ["A", 9, ], ["B", 3, ], ["C", 0,] ];
cg.draw(items1); };

</script>
</head> <body>
<div><canvas width="300" height="200" id="sample_radar"></canvas></div>
<div><canvas width="300" height="200" id="sample_circle"></canvas></div>
</body> </html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2

  • 回答者： yyr446
  • 回答日時：

こうされたし


window.onload = function(){
addEvent(function(){
var cg = new html5jp.graph.circle("sample_circle");
if( ! cg ) { return; }
var items1 = [ ["A", 9, ], ["B", 3, ], ["C", 0,] ];
cg.draw(items1);
});
addEvent(function(){
var cg = new html5jp.graph.circle("sample_circle");
if( ! cg ) { return; }
var items1 = [ ["A", 9, ], ["B", 3, ], ["C", 0,] ];
cg.draw(items1);
});
}
function addEvent(func) {
if (document.addEventListener) {
document.addEventListener("load", func, false);
} else if (document.attachEvent) {
document.attachEvent("onload", func);
}
}
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： babu_baboo
  • 回答日時：

window.onload は、いくつあってもさいごのやつだけゆうこう。

    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
なんとなくそんな気はしていたのです。

1回目と2回目のwindow.onloadを入れ替えると<canvas>タグを変更していないのに
2回目だけが表示されるので。

でも質問内容で引用した<body>の内容を

<body>
<div><canvas width="300" height="200" id="sample_radar"></canvas></div>
<div><canvas width="300" height="200" id="sample_radar"></canvas></div>
<div><canvas width="300" height="200" id="sample_circle"></canvas></div>
<div><canvas width="300" height="200" id="sample_circle"></canvas></div>
</body>

としても3番目の<canvas>が表示されるようなのです。（表示位置から推察）
なので、window.onloadがまずいのか<canvas>が複数かいてもだめなのかも
ちょっとわからなくて・・・うーん

通報する
お礼日時：2010/03/23 16:33

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報