名前と件数をグラフ表示する方法

ホーム > DHTML > 名前と件数をグラフ表示する方法

■説明

　XMLにより、ブラウザ一覧にブラウザ名とサイトにアクセスしてきた件数をを持ち、XSLTによりその情報を出力することが出来ます。そして件数を表示するだけではなくグラフも表示しています。このような情報をHTMLで書くのではなくXMLとXSLTを連携させることでデータベース化しておくと後々非常に情報の更新が楽になります。

　HTMLで直接書いてしまうとデザイン、レイアウト、言語の変更等が生じる際に変更に時間がかかってしまいます。XMLによりデータベース化しておくとこのような変更に対して、即座に移行出来るでしょう。

　Internet Explorer 6以降ならば問題無く実行できます。それ以前の場合には、msxml3をインストールする必要があります。わざわざインストールは面倒だと思いますので、Internet Explorer 6へアップデートする方が楽でしょう。

ダウンロードしたい方は、zip形式のファイルを用意いたしましたので、是非ご利用下さい。
ダウンロード(dhtml_xml_004.zip)

■ソース

dhtml_xml_004.xml部分

<?xml version="1.0" encoding="Shift_JIS" standalone="no"?>
<?xml-stylesheet type="text/xsl" href="dhtml_xml_004.xsl"?>
<!DOCTYPE ブラウザ一覧 SYSTEM "dhtml_xml_004.dtd">

<ブラウザ一覧 title="ブラウザ一覧">
	<ブラウザ>
		<名前>MSIE 4</名前><件数>30</件数>
	</ブラウザ>
	<ブラウザ>
		<名前>MSIE 5</名前><件数>1058</件数>
	</ブラウザ>
	<ブラウザ>
		<名前>MSIE 5.5</名前><件数>1178</件数>
	</ブラウザ>
	<ブラウザ>
		<名前>MSIE 6</名前><件数>8822</件数>
	</ブラウザ>
	<ブラウザ>
		<名前>Netscape 3.0</名前><件数>10</件数>
	</ブラウザ>
	<ブラウザ>
		<名前>Netscape 4.0</名前><件数>1</件数>
	</ブラウザ>
	<ブラウザ>
		<名前>Netscape 4.5</名前><件数>1</件数>
	</ブラウザ>
	<ブラウザ>
		<名前>Netscape 4.6</名前><件数>1</件数>
	</ブラウザ>
	<ブラウザ>
		<名前>Netscape 4.7</名前><件数>35</件数>
	</ブラウザ>
	<ブラウザ>
		<名前>Netscape 6</名前><件数>11</件数>
	</ブラウザ>
	<ブラウザ>
		<名前>Netscape 7</名前><件数>115</件数>
	</ブラウザ>
	<ブラウザ>
		<名前>Mozilla</名前><件数>59</件数>
	</ブラウザ>
	<ブラウザ>
		<名前>Opera 5</名前><件数>0</件数>
	</ブラウザ>
	<ブラウザ>
		<名前>Opera 6</名前><件数>26</件数>
	</ブラウザ>
	<ブラウザ>
		<名前>Opera 7</名前><件数>149</件数>
	</ブラウザ>
	<ブラウザ>
		<名前>Lynx</名前><件数>6</件数>
	</ブラウザ>
	<ブラウザ>
		<名前>DreamPassport</名前><件数>5</件数>
	</ブラウザ>
	<ブラウザ>
		<名前>Download or Check</名前><件数>3</件数>
	</ブラウザ>
	<ブラウザ>
		<名前>etc</名前><件数>313</件数>
	</ブラウザ>
</ブラウザ一覧>

dhtml_xml_004.xsl部分

<?xml version="1.0" encoding="Shift_JIS"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="Shift_JIS" />

<xsl:template match="/">
	<html lang="ja">
	<head>
	<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"/>
	<meta http-equiv="Content-Style-Type" content="text/css"/>
	<link rel="stylesheet" HREF="dhtml_xml_004.css" TYPE="text/css"/>
	<title><xsl:value-of select="/ブラウザ一覧/@title" /></title>
	</head>
	<body>

<xsl:apply-templates />

</body>
	</html>
</xsl:template>

<xsl:template match="ブラウザ一覧">
	<table border="1">
	<tr><th colspan="5"><xsl:value-of select="/ブラウザ一覧/@title" /></th></tr>
	<tr><th>ブラウザ名</th><th>件数</th></tr>

<xsl:for-each select="ブラウザ">
		<tr>
		<td><xsl:value-of select="名前"/></td>
		<td class="td1">
		
		<img>
			<xsl:attribute name="src">graph.gif</xsl:attribute>
			<xsl:attribute name="width"><xsl:value-of select="floor(件数 div 8822 * 300)"/></xsl:attribute>
			<xsl:attribute name="height">12</xsl:attribute>
		</img>
		(<xsl:value-of select="件数"/>)
		</td>
		</tr>
	</xsl:for-each>

</table><br/><br/>
</xsl:template>

</xsl:stylesheet>

■実行例

実行例

■対応ブラウザ

名前と件数をグラフ表示する方法
IE3	IE4	IE5	IE5.5	IE6	N3	N4	N6	N7	O6
×	×	●	●	●	×	×	×	●	×

[ホーム] [DHTML] [↑ページ最上部へ戻る]

Webマスター、HP作成のプロとして活躍したい方は見てください。
ホームページの開設数が増加し、Web業界や一般企業でWebマスターが急激に求められています。Webマスターの絶対数の不足している今が、技能習得の絶好のチャンスです。