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

ダウンロード

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

画面右下の『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でグラフがすぐに導入できる

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

それでは、また。