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

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

使用方法
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>
jQueryベースのグラフ作成javascript「Chart Plugin」サンプル

sponsors

「jQueryベースのグラフ作成javascript「Chart Plugin」」をシェアする

記事作成:
記事URL:

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