CSSだけで円グラフを表示するサンプル
2007年08月09日-
スポンサード リンク
Have a Slice
This is an example of creating a semi-dynamic pie chart without the use of server-side imaging libraries
CSSだけで円グラフを表示するサンプル。
次のような円グラフをCSSのみで実現するサンプルが公開されています。
HTMLコードは以下のようにシンプルに表現できます。
<div class="shadow">
<div id="example">
<div class="pie size35"></div>
<p class="percent">37%</p>
</div>
</div>
次のような1個の円グラフを並べた横長画像のbackground-positionをずらして、必要な部分だけ表示することで実現しているようです。
サーバサイドでもクライアントサイドでも画像を動的に描画することないので軽くていいですね。
スポンサード リンク
Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- 2012年2月10日 管理人のブックマーク
- ブラウザ上でPDFを表示するJSライブラリ「PDF.js」
- 次世代の検索フォームを作成するjQuery&CSS3サンプル
- 2012年2月9日 管理人のブックマーク
- faviconを書き換えてfacebookの通知っぽくしてくれるfaviconアラート実装ライブラリ「Tinycon」
- ページめくりを実現するためのjQueryプラグイン集
- 2012年2月8日 管理人のブックマーク
- HTMLをアップするとCSSのスケルトンを自動生成してくれる「bearcss」
- HTML5で綺麗でインタラクティブなグラフが描けるライブラリ「Flotr2」
- 2012年2月7日 管理人のブックマーク
- 過去のエントリ



















間違いの指摘をしていただける方はメール、あるいはTwitterでお願いします(クリック)




