web屋の備忘録

ホームページ制作、webマーケティング、技術資料など

*

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

      2016/01/04

20150401-1

bootstrapをはじめ、様々なCSSフレームワークが登場し、簡単にかっこ良くデザインできるようになりました。
サイトに棒グラフを使うことがあれば、とても便利なCSSです。

cssで棒グラフを作成するcssセット。
cssplotをダウンロードする

▼ 下記のコードをヘッダに記述。

<link media="all" rel="stylesheet" type="text/css" href="cssplot.full.css" />

▼ 下記のコードで棒グラフを表示

<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>

 - HTML・CSS ,