XHTML+CSSだけでグラフを描けるサンプル(CSS only Charts/Graphs)～日刊にしこり－埼玉版

XHTML+CSSだけでグラフを描けるサンプル(CSS only Charts/Graphs)

投稿者:てつを投稿日時:2007/12/30 16:32:48

色々なところから「CSSだけで実装するグラフ・チャート」の記事をみてみて、もっと簡単に良いグラフが作れないものかと考えたら、結構良い物ができました。

Firefox 2.0.0.11、Opera 9.21、IE6、Safari for Windows 3.0.3で動作を確認しました。

今回は横棒グラフですが、そのうち縦棒グラフなどにも挑戦してみたいと思います。
これを元にもっと良いのが出来たら教えてください。

バーにマウスを乗せるとポップアップで項目名が出ます。

InternetExplorer: 60%InternetExplorer

Firefox: 20%Firefox

Safari: 10%Safari

Opera: 7%Opera

*InternetExplorer: 1%*InternetExplorer

FUJIDoCoDeMo: 1%FUJIDoCoDeMo

Netscape: 1%Netscape

InternetExplorer: 60%InternetExplorer

Firefox: 20%Firefox

Safari: 10%Safari

Opera: 7%Opera

*InternetExplorer: 1%*InternetExplorer

FUJIDoCoDeMo: 1%FUJIDoCoDeMo

Netscape: 1%Netscape

[追記]
ソースを載せるの忘れてました;;

/* css graph type 02 */
div.ns_graph02 {border:1px solid #000; background:#444; padding:10px; margin:0 0 10px 0;}
div.ns_graph02 dl         {clear:both; padding:0; margin:0 0 2px 0; display:block;}
div.ns_graph02 dl dt      {float:left; padding:0; margin:0; display:block; color:#fff; font:normal 10px Verdana; width:100px; border-bottom:2px solid #777; text-align:right;}
div.ns_graph02 dl dd      {float:left; padding:0; margin:0 0 0 10px; display:block; text-align:left; background:#666; width:300px;}
div.ns_graph02 dl dd p    {margin:0; padding:0 5px; display:block; background:#29f; text-align:right;}
div.ns_graph02 dl dd a    {margin:0; padding:0; color:#fff !important; font:bold 10px Verdana; position:relative; text-decoration:none; display:block; cursor:default;}
div.ns_graph02 dl dd a b  {margin:0; padding:2px 5px; color:#fff; font:bold 10px Verdana;}
div.ns_graph02 dl dd a b  {position:absolute; top:-13px; right:-40px; visibility:hidden; background:#000;}
div.ns_graph02 dl dd a:hover,
div.ns_graph02 dl dd a:hover b{visibility:visible; text-decoration:none; cursor:default;}

div.clear {clear:both;}
</style>
	<div class="ns_graph01">
		<dl>
			<dt>InternetExplorer</dt>
			<dd><a href="#">60%InternetExplorer</a></dd>
		</dl>
		<dl>
			<dt>Firefox</dt>
			<dd><a href="#">20%Firefox</a></dd>
		</dl>
		<dl>
			<dt>Safari</dt>
			<dd><a href="#">10%Safari</a></dd>
		</dl>
		<dl>
			<dt>Opera</dt>
			<dd><a href="#">7%Opera</a></dd>
		</dl>
		<dl>
			<dt>*InternetExplorer</dt>
			<dd><a href="#">1%*InternetExplorer</a></dd>
		</dl>
		<dl>
			<dt>FUJIDoCoDeMo</dt>
			<dd><a href="#">1%FUJIDoCoDeMo</a></dd>
		</dl>
		<dl>
			<dt>Netscape</dt>
			<dd><a href="#">1%Netscape</a></dd>
		</dl>
		<div class="clear"></div>
	</div>
	<div class="ns_graph02">
		<dl>
			<dt>InternetExplorer</dt>
			<dd><a href="#">60%InternetExplorer</a></dd>
		</dl>
		<dl>
			<dt>Firefox</dt>
			<dd><a href="#">20%Firefox</a></dd>
		</dl>
		<dl>
			<dt>Safari</dt>
			<dd><a href="#">10%Safari</a></dd>
		</dl>
		<dl>
			<dt>Opera</dt>
			<dd><a href="#">7%Opera</a></dd>
		</dl>
		<dl>
			<dt>*InternetExplorer</dt>
			<dd><a href="#">1%*InternetExplorer</a></dd>
		</dl>
		<dl>
			<dt>FUJIDoCoDeMo</dt>
			<dd><a href="#">1%FUJIDoCoDeMo</a></dd>
		</dl>
		<dl>
			<dt>Netscape</dt>
			<dd><a href="#">1%Netscape</a></dd>
		</dl>
		<div class="clear"></div>
	</div>

参考記事

人気度: 17%