ピュアCSSでクールなグラフサンプル「Pure Css Data Chart」:phpspot開発日誌

前の記事 ≪：2008年2月4日管理人のブックマーク
次の記事 ≫：PHPで使える便利関数をJavaScriptでも使えるようにする「php.js」

ピュアCSSでクールなグラフサンプル「Pure Css Data Chart」

2008年02月05日-

スポンサードリンク

Data visualization is mostly achieved with flash applications or with help of some programming languages. Are those solutions the only way to present, let's say simple data chart? How about giving it a try with nothing but good ol' css?

ピュアCSSでクールなグラフサンプル「Pure Css Data Chart」。
次のようなグラフを描画するCSSとHTMLマークアップのサンプルが紹介されています。

マークアップも次のように綺麗に記述できます。

<dt>Day 1</dt>
<dd class="first">36</dd>
<dt>Day 2</dt>
<dd>45</dd>
<dt>Day 3</dt>
<dd>51</dd>
<dt>Day 4</dt>
<dd>48</dd>
<dt>Day 5</dt>
<dd>55</dd>
<dt>Day 6</dt>
<dd>80</dd>
<dt>Day 7</dt>
<dd>72</dd>
<dt>Day 8</dt>
<dd>71</dd>
<dt>Day 9</dt>
<dd>64</dd>
<dt>Day 10</dt>
<dd>55</dd>
<dt>Day 11</dt>
<dd>62</dd>
<dt>Day 12</dt>
<dd>44</dd>