ホームページに折れ線グラフを載せる方法

このQ&Aのポイント
  • ホームページに折れ線グラフを載せる方法について教えてください。
  • エクセルで折れ線グラフを作成し、グラフの線をクリックしたりマウスをのせたら、グラフにデータの数字が表示されるようにする方法を教えてください。
  • エクセルで作成した折れ線グラフを画像化してホームページに貼り付ける際に、数字がごちゃごちゃになってしまう問題があります。ホームページでスマートに折れ線グラフを作成する方法を教えてください。
回答を見る
  • ベストアンサー

ホームページにグラフを載せたいんですが・・・

こんにちは。HPの作成でいい方法があったら教えてください HPに折れ線グラフを載せ、グラフの線をクリックしたりマウスをのせたら、折れ線グラフにデータの数字が現れるようになればいいなぁ、と思っています。ちょと説明がうまくないのですが、わかりますでしょうか?エクセルで折れ線グラフを作ったときにグラフに数字が現れるような感じです。 今までは、エクセルでグラフを作って画像化して貼り付けていたんですが、折れ線がたくさんあるため、数字をいれるとごちゃごちゃになってしまい、入れれませんでした。 HPでグラフを作ったりする方法など、何かいい方法があったら教えてください。 あんまりPCには詳しくないので、詳しく説明いただけたら嬉しいです。 PCはWINDOWS98と2000。 HPビルダーを持っています。

noname#4251
noname#4251

質問者が選んだベストアンサー

  • ベストアンサー
  • nyanchu
  • ベストアンサー率43% (22/51)
回答No.4

補足です。まずクリッカブルマップ(イメージマップ)は作れますか?一枚の画像に複数のリンクを張るやつです。たぶんHPビルダーにも作る機能はあるんじゃないかと思うけどさわったことないのでわかりません。クリッカブルマップの作り方がわかったら、折れ線グラフのポイントひとつひとつにリンクを設定すると、<area shape="rect" coords="11,34,56,78" href="xx.html"のようなソースが吐出されると思います。そこに title="数値"と付け加えると、マウスを乗せた時にフキ出しがでると思います。実際にどこか別のページへリンクさせるわけではないので href="#"としておきます。まずはクリッカブルマップです。できたら補足を。

noname#4251
質問者

補足

クリッカブルマップの作り方は今調べてわかりました 一つ簡単なソフトをダウンロードしまして、やってみたところ、ふき出しが出てきました。ありがとうございました あと、ひとつだけ欲張りがいえれば・・・・そのグラフの線にマウスをもっていけば、全部の数字が出てくるといいんですけど、そんないい方法はありませんよね~(-_-;) でも、教えてくださった方法だけでも満足です。ありがとうございました

その他の回答 (6)

  • nyanchu
  • ベストアンサー率43% (22/51)
回答No.7

追加です。 >そのグラフの線にマウスをもっていけば、全部の数字が出てくるといいんですけど、 全部の数字とは、合計数値ではなく、一つ一つが一斉に出るということですかね? やっぱりjavascriptをつかってロールオーバーさせるとか.....。マウスを乗せると色が変わったり、するボタンありますよね。あれの応用です。 http://www.keikyu-kids.com/keikyu-service/kids/kidsland-idogaya/index.htmここの、男の人と女の人にマウスをのせると中央の画像がかわりますよね。最初に解答した時、中央の画像が、"数値を出す場所を決めて"という意味で、男の人と女の人のところが、グラフのポイントみたいなかんじです。(この例はクリッカブルではないけど) グラフの画像の上の方に数値が書かれた画像と何も書いて無い画像を用意して、グラフに触った時にその画像をくるっと変えるイメージです。ロールオーバーはjavascriptの入門の第一歩みたいなところがあると思うので、挑戦してみては?作り方を工夫すれば、あなたの意図しているとおり作れるとおもいます。

  • wolv
  • ベストアンサー率37% (376/1001)
回答No.6

> そんないい方法はありませんよね~(-_-;) 試しに使ってみたソフトでは、「四角」ではなくて「折れ線で囲んだ領域」を設定できませんか? できるのなら、線を囲むように領域を設定して、 title="数値" のかわりに title="全ての数値" とすればできると思います。

  • wolv
  • ベストアンサー率37% (376/1001)
回答No.5

HTMLのソースの例です。 imgの名前は適当なので、「X」が表示されます。^^; VMLで書いた図形の上は、クリッカブルマップとして認識されないようなので、 線の周りにマウスカーソルを持ってってください。 <html xmlns:v="urn:schemas-microsoft-com:vml"> <head><title>vml clickable map</title> <style> v\:* { behavior: url(#default#VML); } </style> </head> <body > <v:line from="0,0" to="100,80" strokecolor="red" /> <img src=dummy.gif usemap=#mapdata width=320 height=200> <map name=mapdata> <area shape="rect" coords="10,0, 0,10" href="#" title="点1"> <area shape="rect" coords="90,70, 110,90" href="#" title="点2"> <area shape="poly" coords="10,0, 10,10, 0,10, 90,80, 90,70, 100,70, 10,0" href="#" title="線1" > </map> </body> </html>

  • wolv
  • ベストアンサー率37% (376/1001)
回答No.3

基本的に、HTMLやJavascriptは、グラフや図形を書くのは苦手です。 あらかじめ図を作って貼り付けるか、 Javaなどを使うのが通常の方法になると思います。 グラフを書くだけなら、VMLとJavaScriptの組み合わせでも結構いけます。 VMLについては、http://tohoho.wakusei.ne.jp/wwwvml.htm をご覧ください。

参考URL:
http://tohoho.wakusei.ne.jp/wwwvml.htm
noname#4251
質問者

お礼

なるほど~。いろいろな方法があるんですね 参考にしてみます

  • wolv
  • ベストアンサー率37% (376/1001)
回答No.2

クリッカブルマップについては というか、WWWのページ作成全般については とほほさんのサイトがとても役にたちます。

参考URL:
http://tohoho.wakusei.ne.jp/html/map.htm
noname#4251
質問者

お礼

ありがとうございます。早速参考にしてみます!

  • nyanchu
  • ベストアンサー率43% (22/51)
回答No.1

方法1:グラフのポイントにクリッカブルマップの設定をする。数値を出す場所を決めて、javascriptでグラフのポイントをロールオーバーさせ数値の書かれた画像を表示させる。 方法1:グラフポイントにクリッカブルマップの設定をする。href="#" title="数値"としてマウスを乗せた時吹き出しを出させる。

noname#4251
質問者

お礼

ありがとうございます。 でも、ちょっと初心者なので実際にどう設定したらいいのか、どうhtmlを書いたらいいのかわからないんです。すみませんっと! そういうものを使っているHPとか分かりますか?参考にさせていただきたいのですが・・・

関連するQ&A

  • Excelの折れ線グラフで

    エクセルで作成した折れ線グラフ(マーカーあり)のマーカーとマーカーを線で繋ぎたいのですが、何か良い方法がありましたら教えてください。 現在はオートシェイプで繋ぎ合わせているのですが、 グラフを拡大、縮小したり印刷したりすると線がずれてしまいます。 説明がわかりにくくて申し訳ありません。 宜しくお願い致します。

  • エクセルでグラフ。オートシェイプ

    私はエクセル操作は得意ではありません。 じつはエクセルで折れ線グラフを作成したのですが、たとえば各グラフの線に吹き出しのようなコメントを入れたいんです。とりあえず、グラフ上にオートシェイプで吹き出しとコメントを挿入しました。2つグラフを作成したのですが、一つは問題なくオートシェイプで挿入出来たんです。ところが、もう一つはオートシェイプが挿入出来たんですが、グラフ上をクリックするとそれが消えるんです。グラフの外をクリックするとまた現れる・・・見たいな。これは何の設定が悪いんですか? (うまく言葉で説明出来なくてすみません)

  • エクセルで折れ線グラフにしたいのですが線が出ません

    エクセルのグラフ作成にて下記のようなデータを折れ線グラフで作成したいのですが、どうしても折れ線にならずに数値のところが点で表記されるだけなのです。どうしたらいいかわかりません。 お教えください。    A   B   C   D   E   F (1)  20      40         30 (2)     10      5       8 上記のように A列には(1)の数字のみ。B列には(2)の数字のみといった形です。 もちろん(1)も(2)も入る列はあるのですが・・・。 (1)の折れ線グラフはA-C-F (2)は       B-D-F と数値の入っているところを線で結びたいのです。  普通にやってみるとどうしても線になりません。 教えてください!!

  • excelグラフで、データの抜けを補正したい

    excelの折れ線グラフを作成するときに、 データの抜けている日にちがあると、線が途切れてしまいますよね。 たとえば、1日から7日まで連日データがあって、8日以降1日おきになるような場合、線が途切れないように折れ線グラフを作成する方法はあるのでしょうか?

  • エクセルにて、一部のデータが無い折れ線グラフについて

    エクセルにて、一部のデータが無い折れ線グラフについて 1 2 4 3 折れ線1 2   5 6 折れ線2 上記のように折れ線2のデータが一部無い場合、点と点を線で結ぶ形式を選んでも、数字2と数字5の間の線は描かれません。 これを何とか手書きではなく、自動で書く方法は無いでしょうか?

  • EXCELで白黒グラフが見やすくなる方法

    EXCELでのグラフ作成でお聞きしたいことがあります。 データは、20個あり、白黒折れ線にしたいのですが、 データ量が20個あるので、白黒にすると、似た線になり、わかりにくいです。吹き出しで系列名を書いてグラフの線に載せたいのですが、線がわかりにくくてどちらの線を指し示しているのかわかりません。 わかりやすい折れ線グラフの書き方教えていただけないでしょうか。

  • excelのグラフの作り方について

    excelで、添付画像(右クリックで画像を表示で拡大されます)のような分単位の温度上昇を折れ線グラフで表現したいのですが、 どのようなに操作したらいいでしょうか? X座標に時間、Y座標に温度のシンプルな折れ線グラフを作りたいと思ってます。 ソフトは、excel 2008を使っています。 行全体を選択、挿入→グラフを操作すると画像のような変なグラフになってしまいます。 コマンドで、文字と数字があるセルだけを選択→挿入→グラフ→にすると、「系列数式が長すぎます。」とエラーが出てしまいます。 お詳しい方、ご教示ください。

  • excel2010の折れ線グラフの一括選択

    excel 2010を利用して折れ線グラフを作成しています。折れ線が30本ほどあるのですが、各折れ線の太さを太く、プロットの点を○にしたいと思っています。しかしデフォルトでは線は細く、プロットは各グラフごとに△、□など異なっています。 線の太さ、点の形をまず2-3本程度の少数例で希望の形にテンプレートを作成し、30本のグラフ作成の際にそのテンプレートを使用するという方法を使ってみましたが、2-3本のグラフは確かにテンプレート通りになるのですが他のほとんどのグラフは△、□などの異なるプロットとなってしまいます。全ての折れ線を同じ形式で作成する方法をご存じのかたがいらしたら教えていただけますでしょうか。よろしくお願いいたします。 なお、F4で繰り返しを行うのでもよいと思いましたが、この形式の折れ線グラフに関してはF4の動作が選択できないようです。

  • グラフが変形

    エクセル2003で作成した折れ線グラフを、 エクセル2007で読み込むと、 グラフが変形しました。 正確には、X軸方向の線だけが縮んでしまい、 目盛りはそのままです。 他人が作成したシートなので、 どのような作り方をしているかは分かりません。 作成者に聞いても原因は不明でした。 2003で作成したグラフは2007では読めないのでしょうか?

  • エクセル2003 折れ線グラフの表示について教えて下さい!

    エクセル2003で、縦棒グラフと折れ線グラフの複合グラフを作成しています。 折れ線グラフで、マーカーのみが表示され、線が表示されません。 データ系列の書式設定の中の「パターン」で、線の項目で指定しても表示されない状態です。 棒グラフが2本、折れ線グラフ4本を作成したいのですが、何か問題があるのでしょうか。

専門家に質問してみよう