CSSだけで棒グラフを作成する「cssplot」

• 2015/03/31
• ツイート
• 

スポンサーリンク


前記事がグラフの記事だったのでついでに。

CSSだけで、手軽にグラフを作成できるCSSセットです。

ダウンロード

こちらからダウンロード出来ます。

画面右下の『DownloadZIP』からどうぞ。

セットアップ

そんな難しい事は一切ないです。
<link media="all" rel="stylesheet" type="text/css" href="/build/cssplot.full.css" />

ヘッダーでこちらのグラフCSSを読み込む感じ。
あとは以下のようにHTMLに書き込めばOK。

<div class="column-chart">
<ul class="plot-container">
<li data-cp-size="99">99%</li>
<li data-cp-size="50">50%</li>
<li data-cp-size="30">30%</li>
<li data-cp-size="90">90%</li>
<li data-cp-size="10">10%</li>
<li data-cp-size="70">70%</li>
<li data-cp-size="30">30%</li>
<li data-cp-size="90">90%</li>
</ul>
</div>

そうすると以下のように出力されます。

色はimgフォルダに入っているpngあたり変えれば変更出来ます。

手軽にCSSでグラフがすぐに導入できる

こちらのダウンロードページの下の方にマニュアルがあります。
みてもらうと分かる通り、どれも簡単に導入できます。サイトで動的なグラフを作成するときも結構約に立ちますのでお試しあれ。

それでは、また。

スポンサーリンク

トップへ戻る

Twitter版のネタ帳では毎週月曜～金曜までWeb屋さんに役立つ色んな情報や単なるネタまでをつぶやいています。 @yamada_ntをフォロー