ホームページを作る人のネタ帳

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

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

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でグラフがすぐに導入できる


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

それでは、また。
@yamada_nt
Posted by@yamada_nt
スポンサードリンク

Comments 0

There are no comments yet.

Leave a reply