- ベストアンサー
テキストで折れ線グラフを表示したい
JavaScriptで実現可能かどうかわからないのですが、 テキストで折れ線グラフを表示したいと考えています。 折れ線グラフは値を取得してのものではなく、 あらかじめ、私が用意した数パターンの折れ線グラフにをひな形に テキストを表示できたらなと思います。 Flashでの表示は考えていません。 どなたかお詳しいかたよろしくお願いいたします。
- mokujin14
- お礼率47% (16/34)
- JavaScript
- 回答数8
- ありがとう数16
- みんなの回答 （8）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
<html> <div style="width:800px; height:800px; position:relative; border:1px #f00 solid" id="a"> <input type="button" value="Test" onclick="test()"> <script> function test(){ var e = document.getElementById('a'); for(i=0;i<3600;i+=2){ var n=document.createElement('span'); n.appendChild( document.createTextNode('.')); n.style.position = 'absolute'; n.style.top = 400 + Math.sin( i*3.14159/180 )*i/10; n.style.left = 400 -Math.cos( i*3.14159/180 )*i/10; e.appendChild(n); } alert('曲線もできるんだから直線は簡単！？'); } </script>
その他の回答 (7)
折れ曲がるたびに、方程式でも組み込んでください <html> <div style="width:800px; height:800px; position:relative; border:1px #f00 solid" id="a"> <input type="button" value="Test" onclick="test()"> <script> function test(){ var e = document.getElementById('a'); var str = 'ちがう書き込みでなんだけど、だめだしされてかなり落ち込んでいる。たしかに後先考えずに投稿するのはよくないものだと反省。そして善いものを書いていきたいと思うのだが、そのテンションを維持できないなぁ～'; for(i=0,m=str.length;i<m;i++){ var n=document.createElement('span'); n.appendChild( document.createTextNode(str.substr(i,1))); n.style.position = 'absolute'; n.style.fontSize='9px'; n.style.top = 400 + Math.sin( i*3.14159/20 )*200; n.style.left = i*8; e.appendChild(n); } alert('曲線もできるんだから直線は簡単！？'); } </script>
No2の補足: Ｘは文字列配列の添字でありＹは文字列の桁位置。 これに尽きます。
反応がないようなので、 ie限定で力技なら <html xmlns:v="urn:schemas-microsoft-com:vml"> <head><style>v\:* { behavior: url(#default#VML); }</style></head> <body> <script> var c='#ddd'; for(var i=0;i<501;i+=50){ line( 100,100+i,600,100+i,c); line( 100+i,100,100+i,600,c); } line( 100,600,600,600,'#000'); line( 100,600,100,100,'#000'); line( 100,600,200,300,'#f00'); line( 200,300,400,400,'#f00'); line( 400,400,600,150,'#f00'); line( 100,500,300,200,'#00f'); line( 300,200,450,350,'#00f'); line( 450,350,600,400,'#00f'); function line(x,y,x2,y2,c){document.body.insertAdjacentHTML( "BeforeEnd",'<v:line from="'+x+','+y+'" to="'+x2+','+y2+'" strokecolor="'+c+'"/>');} </script> <span style="position:absolute;left:280px;top:180px;color:#00f">文字は力技</span> </body> </html> http://www.html5.jp/library/graph_vbar.html
お礼
ご回答ありがとうございます。 よろしければ、回答番号：No.2の補足をご覧下さい。
- kura07
- ベストアンサー率50% (30/59)
※参考意見です。テキストではありません IEでしか表示されませんが、 VMLを使うと、ドット表示よりは、折れ線を軽く描けるのでは？ 誰かプログラム作ってくれないかなあ…
お礼
ご回答ありがとうございます。 よろしければ、回答番号：No.2の補足をご覧下さい。
記念投下 グリーンモニターっぽく。 <html> <body style="background-color:#000;color:#0f0"> 実行には時間がかかります。 <input type="button" value="Test" onClick="test()"> </div> <script> var e = document.body; var x=-360,z=-360; function test(){ var n=document.createElement('span'); n.appendChild( document.createTextNode('.')); n.style.position = 'absolute'; var xx = 500 + x + z / 3; var py = Math.sin(x*3.14159/360)*Math.sin(z*3.14159/360); var yy =500 + x / 5 -z/ 4 - py*py*255; n.style.top = yy + 'px'; n.style.left = xx + 'px'; n.style.color='#0f0'; e.appendChild(n); x+=5; if(x>360) { x=-360; z+=5; } if(z<360) setTimeout( test, 5); } </script>
お礼
ご回答ありがとうございます。 よろしければ、回答番号：No.2の補足をご覧下さい。
10_?_"_______*________________" 20_?_"______*_*___*_________**" 30_?_"_____*___*_*_*______**__" 50_?_"____*_____*___*____*____" 60_?_"_***____________*_*_____" 70_?_"*________________*______" 要は、この複雑系をJavaScriptで実現するだけだと思いますよ。 つまりは、Ｘは文字列配列の添字でありＹは文字列のポインタ位置。
お礼
ご回答ありがとうございます。 よろしければ、回答番号：No.2の補足をご覧下さい。
- fujillin
- ベストアンサー率61% (1594/2576)
＞テキストで折れ線グラフを表示したいと考えています って、どんなイメージなのかよくわかりませんが・・・ この質問文に提示されているコードが、文字（.）を連続させて図を描いていますが、そういう意味とは違うのかなぁ？ 勘違いでしたら、失礼。 http://oshiete1.goo.ne.jp/qa4432684.html ＞私が用意した数パターンの折れ線グラフ～～ 数が少ないのであれば、ご自分のイメージに近いものをあらかじめ作成しておいて、画像にしてしまって表示しちゃうという、ずるい（？）方法もありますけど・・・
補足
皆様、ご回答ありがとうございます。 イメージを制作し、サーバにアップしました。 http://jp-network.co.jp/test.gif こちらより内容を確認の上、再度ご回答いただければ幸いです。 この度は返信が遅れました事を心よりお詫び申し上げます。
お礼
ご回答ありがとうございます。 よろしければ、回答番号：No.2の補足をご覧下さい。