olidStateEveryday - Ajax,javascript,UIサンプルとチュートリアル -

Ajax,Javascript、コンテンツを効果的に表現するスクリプトサンプル設置方法

  1. Home>
  2. コンテンツ表示>
  3. グラフ＆チャート>
  4. カラフルなグラフやチャートを作成

グラフ＆チャートjscharts.js

カラフルなグラフやチャートを作成

スポンサードリンク
  • del.icio.us に登録
  • ライブドアクリップに追加
  • Google Bookmarks に追加
  • はてなブックマークに追加
  • Yahoo!ブックマークに登録
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
<script type="text/javascript" src="jscharts.js"></script>

</head>

<body>

<div id="lineData">折れ線グラフ</div>
<script type="text/javascript">
	var myChart = new JSChart('lineData', 'line');
	myChart.setDataXML('dataline.xml');
	myChart.draw();
</script>

<div id="barData">バーグラフ</div>
<script type="text/javascript">
	var myChart = new JSChart('barData', 'bar');
	myChart.setDataXML('databar.xml');
	myChart.draw();
</script>

<div id="pieData">円グラフ</div>
<script type="text/javascript">
	var myChart = new JSChart('pieData', 'pie');
	myChart.setDataXML('datapie.xml');
	myChart.draw();
</script>
</body>
</html>

カラフルなグラフやチャートを作成するスクリプトです。
フレームワークに依存せず、独自に動作します。
作成できるグラフは、円グラフ、棒グラフ、折れ線グラフで、データはJavascriptかXMLで受け渡します。
ここではCMSなどに組み込む場合より実用的だと思われるXMLでの受け渡しをベースに紹介していきます。 
※…日本語の入力はできません

ダウンロード＆<head>設定

ダウンロードタブからサイトへ行き、緑色のFreeDownloadをクリックして、JS-Charts_demo.zipをダウンロードしてください。
ダウンロード時にはメールアドレスが必要になるので用意しておいてください。
解凍して出てきた「sources」フォルダの中にjscharts.jsが格納されているので、これをサーバーへアップロード。
そして、適用させたいページのヘッダーへこれを読みこませます。

<script type="text/javascript" src="jscharts.js"></script>　

パスは任意で変更してください。

HTMLのマークアップ

描画スペースとなるHTML要素をマークアップします。

<div id="lineData">まるまる統計データ</div>　

IDの部分は任意でOKで、要素の内容にはグラフを説明する文章でも入れておくと良いかと思います。

Javascriptの設定

グラフの元となるデータをJavascriptで設定します。

<script type="text/javascript">
    var myChart = new JSChart('lineData', 'line'); //グラフ描画スペースのID名とグラフの種類
    myChart.setDataXML('lineData.xml'); //XMLデータの読み込み
    myChart.draw(); //グラフを描画
</script>　

この記述は、必ず描画スペースの後に記述します。じゃないとアラートが出現します。XMLへのパスは各自調節してください。

XMLデータの設定

XMLデータでは、グラフのデータと、グラフのビジュアルを設定します。

基本的な共通項目

<?xml version="1.0"?>
<JSChart>
<dataset type="グラフの種類">　bar,line,pieのいずれかを記述
<data unit="2003" value="127696"/>データ１
<data unit="2004" value="127790"/>データ２
<data unit="2005" value="127768"/>データ３
<data unit="2006" value="127750"/>データ４
</dataset>
<colorset>
<color value="#7979DB"/>データ１のカラー
<color value="#7952E9"/>データ２のカラー
<color value="#792BC8"/>データ３のカラー
<color value="#792BA1"/>データ４のカラー
</colorset>
<optionset>
<option set="setSize" value="1000,500"/> グラフのサイズ
<option set="setTitle" value="'customized chart'"/> タイトル
<option set="setTitleColor" value="'#8C8383'"/> タイトルカラー
<option set="setAxisWidth" value="1"/>軸線の太さ
<option set="setAxisColor" value="'#000'"/>軸線のカラー
<option set="setAxisNameX" value="'Population'"/>X軸の名前
<option set="setAxisNameY" value="'JAPAN TOUKEI'"/>Y軸の名前
<option set="setAxisNameColor" value="'#655D5D'"/>軸の名前のカラー
<option set="setAxisNameFontSize" value="9"/>軸の名前のサイズ
<option set="setAxisPaddingLeft" value="80"/>軸線から左のパディング
<option set="setAxisValuesDecimals" value="0"/>少数何桁表示
<option set="setAxisValuesColor" value="'#9C1919'"/>項目のカラー
<option set="setAxisPaddingBottom" value="60"/>軸線から下のパディング
<option set="setAxisPaddingLeft" value="180"/>軸線から左のパディング
<option set="setAxisPaddingRight" value="170"/>軸線から右のパディング
<option set="setAxisPaddingTop" value="65"/>軸線から上のパディング
<option set="setBackgroundImage" value="'chart_bg.jpg'"/>背景画像
</optionset>
</JSChart>　

バーグラフ特有の項目（基本項目のoptionに追加する）

<option set="setBarColor" value="'#42aBdB'"/>バーを単色で
<option set="setBarOpacity" value="0.8"/>バーの透過率
<option set="setBarBorderWidth" value="0"/>バーの枠線の太さ
<option set="setBarBorderColor" value="'#D9EDF7'"/>バーの枠線のカラー
<option set="setBarValues" value="true"/>バーの値を表示
<option set="setBarValuesColor" value="'#9C1919'"/>バーの値のカラー
<option set="setGridColor" value="'#5D5F5D'"/>グリッドのカラー　

折れ線グラフ特有の項目（基本項目のoptionに追加する）

<option set="setLabelY" value="[0, 'Low']"/>
<option set="setLabelY" value="[5, 'Medium']"/>
<option set="setLabelY" value="[10, 'High']"/>
<option set="setLineColor" value="'#8638D5'"/>線のカラー　

円グラフ特有の項目（基本項目のoptionに追加する）

<option set="setPiePosition" value="0, 0"/>グラフの位置
<option set="setPieRadius" value="100"/>グラフの半径？
<option set="setPieUnitsFontSize" value="8"/>フォントサイズ
<option set="setPieUnitsColor" value="'#474747'"/>フォントカラー
<option set="setPieValuesColor" value="'#474747'"/>値のフォントカラー
<option set="setPieValuesOffset" value="-10"/>値の位置　

基本項目に使用したいグラフ特有の項目を追加してXMLファイルとしてjavascriptで読みこませます。
折れ線グラフの場合は<colorset>は要りませんので削除してください。 

関連スクリプト

感想

これはすごい便利ですね。CMSに組み込んでデータ入力専用の投稿画面とXML出力を調節すれば、すごいアクティブに統計データとか活用できそうです。グラフをいちいちグラフィックで作るのって、実際かなり面倒だし、このスクリプトはデザイン面も十分に表現できるので使いやすいです。
これで日本語表示できれば最高なんですけどね、Unicode化しても無理でした。。。

スクリプトの使用について

SolidStateEverydayでご紹介しているAjax,Javascript等のスクリプトをご利用になる場合は、必ず製作元のサイトで使用ライセンスを確認してください。ご利用は自己責任でお願い致します。

結局、エックスサーバーなんですよね。