- 締切済み
ひとつのHTMLファイル内にcanvasでグラフを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>
- jueves
- お礼率40% (2/5)
- JavaScript
- 回答数2
- ありがとう数6
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- yyr446
- ベストアンサー率65% (870/1330)
こうされたし 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); } }
- babu_baboo
- ベストアンサー率51% (268/525)
window.onload は、いくつあってもさいごのやつだけゆうこう。
関連するQ&A
- JavaScriptでレーダーチャート表示
JavaScriptでレーダーチャートを表示したくて html5jp様のライブラリを使用しているのですが 「"angle_num"が宣言されていません」とエラーが表示されてしまい 表示できません。 ちなみにクエリ文字列からデータを取得しています。 どなたか解決お願いします。 ソースは以下のようになってます。 <html> <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</title> <style type="text/css"> canvas {border:0px solid #4c4c4c;} </style> <!--[if IE]><script type="text/javascript" src="graph_radar_1_0_0/html5jp/excanvas/excanvas.js"></script><![endif]--> <script type="text/javascript" src="graph_radar_1_0_0/html5jp/graph/radar.js"></script> <script type="text/javascript"> function $q(){ var result = {}; var str = location.search.substring(1); var paramss = str.split('&'); for(var i = 0;i < paramss.length; i++){ var kv = paramss[i].split('='); result[kv[0]] = decodeURIComponent(kv[1]); } return result; } var q = $q(); for(var j = 1; j < 21; j++){ /* document.write(q['a'+j] + " "); */ q['a'+j]-=0; /* document.write(typeof q['a'+j]); */ } window.onload = function() { var rc = new html5jp.graph.radar("sample"); if( ! rc ) { return; } var items = [ [ q.a0, q.a1, q.a2, q.a3, q.a4, q.a5, q.a6, q.a7, q.a8, q.a9, q.a10], ["ave.", q.a11, q.a12, q.a13, q.a14, q.a15, q.a16, q.a17, q.a18, q.a19, q.a20] ]; var params = { aCap: ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"], aMax: 5, aMin: 0 }; rc.draw(items, params); }; </script> </head> <body scroll="no"> <div><canvas width="300" height="200" id="sample"></canvas></div> </body> </html>
- 締切済み
- JavaScript
- ModalBoxのIEでの表示について
質問です。 javascriptの「ModalBox」についてなのですがModalBox内で指定したhtmlファイルがIE7では表示されません。Firefoxでは表示されるのですが・・・なぜでしょう？ 一応javascriptは表示され上からウィンドウは表示されるのですが中身の内容がでてきません(Firefoxなら表示されます) ソースですが 表示するボタンがある側↓----------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>ModalBox サンプル</title> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" href="modalbox.css" type="text/css" media="all"> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript" src="lib/prototype.js"></script> <script type="text/javascript" src="lib/scriptaculous.js"></script> <script type="text/javascript" src="modalbox.js"></script> </head> <body> <h1>ModalBoxサンプル</h1> <a href="sample.html" title="Sample 1" onclick="Modalbox.show(this.href, this.title); return false;">ダイアログを表示</a> </body> </html> --------------------------- 表示されるhtml側↓ <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>Sample</title> </head> <body> サンプル </body> </html> ----------------------------- となっています。 調べたところIE7にも対応しているとの事なのですが何故でしょうか？
- 締切済み
- JavaScript
- 外部ファイルJS参照を全て消さないと「文字が正しくありません」エラー
実に不思議なのですが、 以下のように4つのJSファイルをインクルードしているHTMLファイルを ローカルで開くと「文字が正しくありません」とスクリプトエラーが何回かでます。 ですが、script1～4.js の行を全てコメントアウトすると、エラーはでません。 1～4のどれかにエラーが含まれているのかと、一つ一つを外してみましたが、 どの行を外しても、やはり「文字が正しくありません」と出てしまいます。 ローカルの然るべきパスに1～4はあります。また、HTML同様、JSもEUCになってます。 何が原因なのでしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <title>タイトル</title> <meta http-equiv="content-type" content="text/html; charset=euc-jp"> <meta http-equiv="content-script-type" content="text/javascript"> <meta http-equiv="content-style-type" content="text/css"> <link href="../css/style.css" rel="stylesheet"> <script src="../js/script1.js" type="text/javascript"></script> <script src="../js/script2.js" type="text/javascript"></script> <script src="../js/script3.js" type="text/javascript"></script> <script src="../js/script4.js" type="text/javascript"></script> </head>
- ベストアンサー
- JavaScript
- ＪＳの記述を別ファイルに移す
下記のＨＴＭＬ内の <script type="text/javascript">～</script> をtest.jsとして別ファイルに移す場合にどのように、記述するればよいのでしょうか。単純にコピペしたのですがうまくいきません。 初歩的だとは思いますが、ご指導をお願いします。 --------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/Draggable.js"></script> </head> <body> <div id="test1" class="test"></div> <div id="test2" class="test"></div> <script type="text/javascript"> var test1 = new Draggable("test1"); var test2 = new Draggable("test2"); </script> </body> </html>
- ベストアンサー
- JavaScript
- HTML5のcanvasで描画がされない
HTML5のcanvas要素を使って描画をしようとしたのですが、図形が表示されません。 コードは以下の通りです。 ・index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvasで図形を描く</title> <script type="text/javascript" src="paint.js"></script> </head> <body onLoad="draw()"> <canvas id="mycanvas"width="800" height"800"> </canvas> </body> </html> ・paint.js function draw() { //描画コンテキストの取得 var canvas = document.getElementById('mycanvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.arc(180,150,20,Math.PI*1,Math.PI*2,true); } } このコードでは(180,150)の位置に半径20の円が描画されるはずなのですが、何も表示されませんでした。 どこかコードに誤りがあるのでしょうか？ よろしくお願いします。
- 締切済み
- HTML
- 外部読み込みで動かないときの対処法
プログラミングの入口にも立っていない初心者です。 あるプログラムを導入することになりました。 htmlに直接記述した場合はjsが動いていることが確認ができるのですが、外部読み込みにした場合、なぜか動きません。 記述方法がまちがっているのでしょうか？ サイト運営の手間を考えて、絶対外部読み込みにする必要があります。 。 《動く…jsをhtmlに直接記述》 <head> <!-- 文字コードなどの記述は省いています --> <meta http-equiv="Content-Script-Type" content="text/javascript" /> </head> <body> <!-- その他のhtml記述は省略 --> <script type="text/javascript"> <!-- document.write(unescape("%3Cscript src='" + document.location.protocol + '//www.sample.com/js?pcid=PC-123456-A' + "' type='text/javascript'%3E%3C/script%3E")); // --> </script> <script type="text/javascript"> <!-- (function() { var pc = new predicta.PClick(); pc.start(); })(); // --> </body> 《動かない…js外部読み込みの記述》 <head> <!-- 文字コードなどの記述は省いています --> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript" src="http://www.sample.net/hoge/js/sample.js"></script> </head> ------------------------------------------------------ js/sample.jsの記述 ------------------------------------------------------ document.write(unescape("%3Cscript src='" + document.location.protocol + '//www.sample.com/js?pcid=PC-123456-A' + "' type='text/javascript'%3E%3C/script%3E")); (function() { var pc = new predicta.PClick(); pc.start(); })(); ちなみに、その他にも外部読み込みし、動いているJavaScriptはあります。 ご教示のほど、どうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- ジャバスクリプトが作動しません。
初めまして、素人なので的外れな質問だったら恐縮です。 以下のようにジャバスクリプトを2つ記述しましたが、後ろに記述した１つしか作動しません。 記述の順番を入れ替えても、やはり後ろに記述した方しか作動しません。 何が悪いのか、どなたか教えて頂けますでしょうか？ <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>ホームページテンプレート</title> <meta name="description" content="説明を入れます" /> <meta name="keywords" content="キーワード" /> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/script.js"></script> <link href="css/gallery11.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/effects.js"></script> <script type="text/javascript" src="js/glider.js"></script> <script type="text/javascript"><!-- Event.observe(window, "load", function(){ new Glider("album1", { duration:1.0 } ); }); // --></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var setImg = '#viewer'; var fadeSpeed = 1500; var switchDelay = 5000; $(setImg).children('img').css({opacity:'0'}); $(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed); setInterval(function(){ $(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg); },switchDelay); }); </script> </head>
- ベストアンサー
- JavaScript
- 文字表示の設定方法について
このサイトの文字化けについての質問です。 http://www.hempkitchen.jp/ 左メニューに、twitterヴィジェットが表示されていたのですが、先日から表示がされなくなり 原因をリサーチしていた時に <meta http-equiv="Content-Type" content="text/html; charset=shift_jis">を <meta http-equiv="Content-Type" content="text/html; charset=utf-8">に変更したら、 twitterヴィジェットは表示されたのですが、 ｊｓで管理しているメニューが文字化けしてしまいました。 下記3つのｊｓファイルで管理しているメニューです。 <script language="JavaScript" src="hempkitchen.js"></script> <script language="JavaScript" src="js/footer1.js"></script> <script language="JavaScript" src="footer2.js"></script> 一応、ｃｓｓファイルもチェックしました（@charset "shift_jis";）となっていたので。 こちらのファイルを@charset "utf-8";に変更してみましたが、文字化けしたままでした。 いろいろ調べてみたのですが、困っています。 ご回答、よろしくお願いします。
- 締切済み
- HTML
- HTMLソースにない文字がブラウザ画面に表示
HTMLのソースについて DOMソースについて ある画面のHTMLについて質問です。HTML自体には、閉じるタグが漏れているとかそういったミスが ないことを確認済。 対象のHTMLをブラウザで見ると一番先頭に「/」（半角スラッシュ）が入っています。HTML自体をどんなにみても 余計なスラッシュはありません。見落としがあるといけないので検索をしてみたのですがやはりありません。これは間違いありません。 IE１０ DebugBarを使用しDOMソースというのをみると、<body>のすぐ下に「/」がありその下に<meta ・・・ が続いています。 FireFoxで見てもやはり「/」は画面の一番上に表示されています。インスペクタでみるとIE同様 <meta ・・・ <link ・・・ が、bodyタグ、スラッシュ、の次に続きます。 画面で右クリックしソースをみると 一番先頭に「/」があり次に <!DOCTYPE ・・・と続きます。 すごく困っているのは このスラッシュを取り除きたいのですが、どうしたらいいのでしょうか？ bodyの中を空にしてみたのですがやはり画面でみると先頭に半角スラッシュが登場します。 ほんとうにわからず質問させていただきました。 次に どうしてこのような現象が起きるのでしょうか？ HTMLの先頭部分は以下のとおりです。 bodyタグの中は簡単なtebleです ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ｘｘｘｘｘｘｘ</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta name="robots" content="noindex,nofollow"> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> <script type="text/javascript" src="js/xxx.js"></script> <script type="text/javascript" src="js/xxxxxx.js"></script> </head> <body> <div> <table> (略） </table> </div> </body> </html>
- 締切済み
- HTML
お礼
ありがとうございます。 なんとなくそんな気はしていたのです。 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>が複数かいてもだめなのかも ちょっとわからなくて・・・うーん