Home > CSS > CSS+JSで棒グラフを作る

CSS+JSで棒グラフを作る

  • Posted by: ryow
  • 2007年7月 7日 22:59
  • CSS

まずはこいつを見てくれ。これをどう思う?
CSSでグラフ

すごく…　validです…

グラフを定義リスト（DL/DT/DD）でマークアップして、それをCSSとJSでグラフにしてやろう、という内容です。
上のリンク先のソースを読んでくれれば一目瞭然ですが、HTMLはこんなにvalid。

<dl class="graph">
<dt>肉まん</dt>
<dd>255</dd>
<dt>ごはん</dt>
<dd>165</dd>
<dt>ヨーグルト</dt>
<dd>62</dd>
<dt>しいたけ</dt>
<dd>13</dd>
</dl>
しいたけ大好きだ！　という話は置いといて、要は定義されたDDの内容をjsで配列として読み取り、DDの中に display:block; のSPANを作って、SPANの背景色をグラフの棒の色にして、SPANの幅をDDの数字の内容にしている、というだけのこと。
jsがダーティだと思ったら直してください。直して教えてくれると嬉しい。
SPANの背景に画像を使う場合（グラデーションとか）は次回。

関連エントリー

Comments:0

Comment Form

Trackbacks:0

TrackBack URL for this entry
http://ryow.net/mt/mt-tb.cgi/9
Listed below are links to weblogs that reference
CSS+JSで棒グラフを作る from ryow.net Blog

Home > CSS > CSS+JSで棒グラフを作る

最近の記事
Categories
Archives
AD
About

りょうどっとねっとブログ

Twitter :ryownet

はてな :ryownet

Search

Return to page top