[JS]カラフルな折れ線・棒グラフやパイチャートを描くスクリプト -JS charts

画像を使用しないで、折れ線グラフや棒グラフ、パイチャートを作成するスクリプト「JS charts」を紹介します。

JS charts
demo

JS chartsはjQueryなど他のスクリプトに依存せずに動作し、対応ブラウザは下記のようになっています。

Windows

• IE 6/7
• Fx1.5+
• Op 9+
• Safari 3.1+

Mac

• Fx 1.5+
• Safari 2+
• iPhone 1+

折れ線グラフや棒グラフ、パイチャートを描くには、スクリプトを外部ファイルとして記述し、書式に合わせて記述します。
JS Charts | How to use

グラフはCanvasで描かれており、数値はXMLによって管理します。

XMLのサンプル

<?xml version="1.0"?>
<jschart>
	<dataset type="line">
		<data unit="10" value="20"/>
		<data unit="15" value="10"/>
		<data unit="20" value="30"/>
		<data unit="25" value="10"/>
		<data unit="30" value="5"/>
	</dataset>
</jschart>

スクリプトは個人・商用サイトでフリーで利用でき、下記ページからダウンロードできます。
JS Charts | Free download（要：メールアドレス）

グラフの数値やデザインはテンプレートが用意されており、ブラウザ上で確認しながら変更できます。
JS Charts | Choose template
※作成したグラフを利用するには、登録が必要です。

Post on:2009年2月6日