jQueryベースのグラフ作成javascript「Chart Plugin」

サイトでグラフを作成する場合のはなかなか面倒です。
Chart PluginはjQueryベースで簡単にグラフを作成できます。

使用方法

Chart Pluginからファイル一式をダウンロードします。


<script type="text/javascript" src="http://yourdomain/jquery.js"></script>
<script type="text/javascript" src="http://yourdomain/json.js"></script>
<script type="text/javascript" src="http://yourdomain/chartplugin.js"></script>
<script type="text/javascript" src="http://yourdomain/excanvas.js"></script>
<script type="text/javascript" src="http://yourdomain/wz_jsgraphics.js"></script>
<script type="text/javascript" src="http://yourdomain/chart.js"></script>
<script type="text/javascript" src="http://yourdomain/canvaschartpainter.js"></script>
<script type="text/javascript" src="http://yourdomain/jgchartpainter.js"></script>
<link rel="stylesheet" type="text/css" href="http://yourdomain/canvaschart.css">
<lstyle type="text/css">
#id名 {position:relative;}
</style>

上記のようにファイル全てを書き込みます。
メインとなるグラフ部分は以下の通りに記述します。


$(document).ready(function() {
	$('#id名')
		.chartInit({
			"painterType":"canvas",  //種類（canvas または jsgraphics）
			"backgroundColor":"",  //グラフの背景色
			"textColor":"",  //グラフの文字色
			"axesColor":"",  //軸の色
			"yMin":"0",  //Y軸の始点
			"yMax":"300",  //Y軸の終点
			"xGrid":"0",  //X軸クリッド距離
			"yGrid":"10",  //Y軸のグリッド距離
			"xLabels":["Label","Label2"....],  //X軸ラベル
			"showLegend":false  //項目の表示
			})
		.chartAdd({"label":"ラベル1","type":"Area","color":"HEX","values":["N","N2".....]})  //Areaグラフ
		.chartAdd({"label":"ラベル2","type":"Bar","color":"HEX","values":[数値})  //Barグラフ
		.chartAdd({"label":"ラベル3","type":"Line","color":"HEX","values":[数値})  //Lineグラフ
		.chartClear()
		.chartDraw();
});

最後にグラフを表示する場所に以下を記入します。


<div id="id名" style="width: 横幅; height: 高さ;"></div>

サンプル

Javascriptサンプルページ一覧

skuare.net

コードをハイライト表示するjavascript「Chili」