- ベストアンサー
テキストで折れ線グラフを表示したい
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 こちらより内容を確認の上、再度ご回答いただければ幸いです。 この度は返信が遅れました事を心よりお詫び申し上げます。
関連するQ&A
- エクセル2003 折れ線グラフの表示について教えて下さい！
エクセル2003で、縦棒グラフと折れ線グラフの複合グラフを作成しています。 折れ線グラフで、マーカーのみが表示され、線が表示されません。 データ系列の書式設定の中の「パターン」で、線の項目で指定しても表示されない状態です。 棒グラフが2本、折れ線グラフ4本を作成したいのですが、何か問題があるのでしょうか。
- ベストアンサー
- オフィス系ソフト
- 複数の折れ線グラフを同一グラフ内で表示したいのですが
いいスクリプトが見つからなくて困っています。 折れ線グラフのデータはCGIのスクリプトで抽出するので、それら複数のデータを色分けして折れ線グラフで出力したいのです。 要は各チームの月間順位変動グラフみたいなものを作りたいのです。 http://www.core-p.com/cgi-search/search/search.cgi?cmd=dp&num=971 ここで見つけたJavaScriptをCGI内で利用しよう改造してみたのですが、複数の折れ線グラフの表示ができませんでした（別のグラフの点が表示されるまではいきましたがその点と点を結ぶ線の表示で挫折しました。元々私がJavaScriptに疎いということもありますが）。 何かいい案やいいスクリプトをご存知の方がいらっしゃいましたらご教授お願いします。
- ベストアンサー
- CGI
- PowerPoint2007 アニメーションでグラフの要素（折れ線）を少しずつ出したい
タイトルの通りです。 PowerPointo2007で、折れ線グラフを作成しているのですが、 この折れ線を下記のようにアニメーションで表示させたいです。 1.グラフの枠だけ出ている。 2.折れ線の最初の値だけ登場 3.クリックするごとに右に少しずつ伸びる これは、実現可能でしょうか？ いろいろ触ってみているのですが、なかなかうまくいきません。 ご存知の方、ご教示ください。 よろしくお願いいたします！
- ベストアンサー
- オフィス系ソフト
- 折れ線グラフ
Excelのグラフについて。 一旦０にリセットする折れ線グラフを作成できますでしょうか？ 具体的には、 ある数値について １月１日は０ １月末日は、任意の値（３５０など） ２月１日は０ ２月末日は、任意の値（７６０など） １年分、以下略 これらの値を棒グラフで示したいです。 その際、１月末日から２月１日までの折れ線を非表示にしたいです。 可能でしょうか？ よろしくお願いします。 Excel２０１０以上
- 締切済み
- Excel（エクセル）
- Excelの折れ線グラフを重ねたい
体重、体脂肪、基礎代謝、体年齢などが出る体重計を持っているので、すべてをExcelで管理したいと思っています。（できれば、体温も一緒に） 折れ線グラフを作りたいのですが、値が色々で、上手く作れません（体重はY軸を５０～６０にしたい、体脂肪は２０～３０にしたい等、Y軸の値がばらばらなため。） そこで、それぞれ折れ線グラフを作って重ねられないか？と、思ったのですが、透明化ができないようなので、重ねても一番上のグラフしか見えません。 どうしたら、全部の値をグラフで表示できるでしょうか？
- ベストアンサー
- オフィス系ソフト
- エクセルの折れ線グラフの折れ線が表示できない
エクセルで折れ線グラフを作成したのですが、 折れ線が消えてしまいました。（マーカーは表示されているのですが） どうすればもう一度表示されますか？
- 締切済み
- オフィス系ソフト
- EXCELの折れ線グラフについて
はじめまして。EXCEL初心者です。 EXCELでＡ～Ｂのある値の平均値を折れ線グラフで作成したのですが、Ａ～Ｂの個々の値をグラフ上に誤差のように表示するにはどのようにしたらよいのでしょうか？ よろしくお願いいたします。
- 締切済み
- オフィス系ソフト
- エクセルの折れ線グラフについて
大学の研究で結果をエクセルの折れ線グラフで作成しているのですがｘ軸の値をグラフの下に表示する方法がわかりません。 扱うのは振動データでしてｘ軸を時間、ｙ軸を振動データの値とします。このデータで折れ線グラフを作成し、プロットエリアの下とｘ軸のラベルの間に時間の値が表示されるようにしたいのです。 質問が分かりにくくて申し訳ありませんがやり方を教えてください。
- ベストアンサー
- オフィス系ソフト
- 折れ線グラフについて
折れ線グラフを作る際に、二項目あったとして、そのうちの片方に数値ではなく文字が入っていた場合（例えば本来なら計測した数値が入るはずの欄に、「事情により測定できず」などの文章が入っていた場合）その欄の値が全ておかしくなってしまいます。折れ線グラフの値もおかしな状態になってしまうのですが、こういう場合、どうすれば良いのでしょうか？アドバイス宜しくお願い致します。
- 締切済み
- その他（ビジネス・キャリア）
- Flashを使用して、折れ線グラフを作成したい
Flash初心者です。 やりたいことは、外部ファイル（できればtxtファイル）より X座標、Y座標を読み取り色種別ごとの折れ線グラフを生成したいです。 縦軸、横軸の値も自由に書き換えたいです。 あるプルダウン項目を選択し決定ボタンを押下すると、 PHPモジュールが上記外部ファイルを生成し、そのファイルを Flashのアクションスクリプトで読みにいき折れ線グラフを表示するというしくみが望ましいです。 PHPやプログラムは理解しております、ただFlashのアクションスクリプトがわかりません。 ご教授願います。またボタンが押下されるたびにFlashの折れ線グラフ が都度更新されるものがいいです。 よろしくお願いいたします。
- 締切済み
- Flash
お礼
ご回答ありがとうございます。 よろしければ、回答番号：No.2の補足をご覧下さい。