[JS]カラフルな折れ線・棒グラフやパイチャートを描くスクリプト -JS charts
Post on:2009年2月6日
sponsors
画像を使用しないで、折れ線グラフや棒グラフ、パイチャートを作成するスクリプト「JS charts」を紹介します。
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のサンプル
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<textarea name="code" class="html" cols="60" rows="5"> <?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> </textarea> |
スクリプトは個人・商用サイトでフリーで利用でき、下記ページからダウンロードできます。
JS Charts | Free download（要：メールアドレス）
グラフの数値やデザインはテンプレートが用意されており、ブラウザ上で確認しながら変更できます。
JS Charts | Choose template
※作成したグラフを利用するには、登録が必要です。
sponsors
