jquery.jQchart

nightly Download :jquery.jqchart.js( )
参考 CSS :このページのスタイルシートファイル
Samples :http://jsgt.org/lib/jquery/plugin/jqchart/sample/

|++かも日記 | jQuery › Downloads › Plugins › jQchart | nightly.htm |

今回は、HTMLとCSSとJSの分離のことも(多少)考えつつ作ってみました。使う場合は、それぞれの構造把握がポイントです。

[HTML] HTML制作者が書いたcanvas要素を自動でラップするDIVを頂点として、すべての自動生成されるボックス要素がそのDIV配下にぶら下がっています。
[CSS] チャート内のすべての要素のID名とCLASS名は、HTML制作者が書いたcanvas要素のID名を元にして、命名規則に従い自動生成されます。チャートのデザインはそれを利用して、原則.css外部ファイルから行います。
[JS] JavaScriptは、当然、jQueryのネームスペース$.fn 内にすべてのオブジェクトを収めました。主要なDIV要素へは直接$("#キャンバスID名").jQchart.hogehogeのような感じ(^^;でアクセスできます。

Minimum 最小構成

Basic Sample (基本)

[HTML file] min0.htm
<!--[if IE]>
<script src="./excanvas-compressed.js" type="text/javascript" ></script>
<![endif]-->
<script src="./jquery-min.js" type="text/javascript"></script>
<script src="./jquery.jqchart.js" type="text/javascript" charset="utf-8"></script>
<body>
<canvas id="canvasMyID"></canvas>
<script type="text/javascript">
$(function(){
	$('#canvasMyID').jQchart('./data0.txt')
});
</script>

[Data file] data0.txt
{
  data : [
    [333,555,888,445,666,999,333]
  ]
};

*注意 IEは、canvasタグより前にbodyタグが無いと動作しません。jquery.jqchart.js内には、日本語が使われる可能性もあるので念のため charset="utf-8" で読み込んでおきます。

[HTML file] min0-1.htm
<!--[if IE]>
<script src="./excanvas-compressed.js" type="text/javascript" ></script>
<![endif]-->
<script src="./jquery-min.js" type="text/javascript"></script>
<script src="./jquery.jqchart.js" type="text/javascript" charset="utf-8"></script>
<body>
<canvas id="canvasMyID"></canvas>
<script type="text/javascript">
var setting={
  data : [[300,500,600,700,888,777,666]]
};
$(function(){
	$('#canvasMyID').jQchart(setting);
})
</script>

[HTML file] min0-3.htm [ New ]
<!--[if IE]>
<script src="./excanvas-compressed.js" type="text/javascript" ></script>
<![endif]-->
<script src="./jquery-min.js" type="text/javascript"></script>
<script src="./jquery.jqchart.js" type="text/javascript" charset="utf-8"></script>
<body>
<canvas id="canvasMyID" height="200"></canvas>
<script type="text/javascript">
  var chartSetting={
    data : [
      [435,500,600,700,888,777,925],
      [50,123,312,200,402,300,512]
    ]
  };
  $(function(){
    $('#canvasMyID').jQchart(chartSetting);
  })
</script>

[HTML file] min0-1-0.htm [ New ]
<!--[if IE]>
<script src="./excanvas-compressed.js" type="text/javascript" ></script>
<![endif]-->
<script src="./jquery-min.js" type="text/javascript"></script>
<script src="./jquery.jqchart.js" type="text/javascript" charset="utf-8"></script>
<body>
<canvas id="canvasMyID" height="200"></canvas>
<script type="text/javascript">
  var chartSetting={
    config : { 
      title  : 'labelXを設定してみます',
      labelX : ["月","火","水","木","金","土","日"],
      scaleY : {min: 0,max:2000,gap:100},
      scaleFontSize : 9
  },
    data : [
    [300,480,700,720,780,1200,1800]
  ]
  $(function(){
    $('#canvasMyID').jQchart(chartSetting);
  })
</script>
<style>
/* ラベル Y軸 */
.jQchart-labelY-canvasMyID{
	font-size : 8px;
}
/* ラベル X軸 */
.jQchart-labelX-canvasMyID{
	font-size : 12px;
}
</style>

[HTML file] min0-2.htm
<!--[if IE]>
<script src="./excanvas-compressed.js" type="text/javascript" ></script>
<![endif]-->
<script src="./jquery-min.js" type="text/javascript"></script>
<script src="./jquery.jqchart.js" type="text/javascript" charset="utf-8"></script>
<body>
<canvas id="canvasMyID" height="200"></canvas>
<script type="text/javascript">
$(function(){
	$('#canvasMyID').jQchart('./data5.txt')
});
</script>

[Data file] data5.txt
{
  data: (function(){ 
        var d = [];
        for (var i = 0; i < 30; i ++)
            d.push(500+parseInt(Math.sin(i)*300,10));
     return [d];
  })()
};

Event (イベントによる描画)

[HTML file] min2.htm
<!--[if IE]>
<script src="./excanvas-compressed.js" type="text/javascript" ></script>
<![endif]-->
<script src="./jquery-min.js" type="text/javascript"></script>
<script src="./jquery.jqchart.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
	$('#myBtn').click(function(){
		$('#canvasMyID').jQchart('./data0.txt');
	})
})
</script>
<body>
<canvas id="canvasMyID"></canvas>
<button id="myBtn">data0.txt</button>

[Data file] data0.txt
{
  data : [
    [333,555,888,445,666,999,333]
  ]
};

[HTML file] min1.htm
<!--[if IE]>
<script src="./excanvas-compressed.js" type="text/javascript" ></script>
<![endif]-->
<script src="./jquery-min.js" type="text/javascript"></script>
<script src="./jquery.jqchart.js" type="text/javascript" charset="utf-8"></script>
<body>
<canvas id="canvasMyID"></canvas>
<input type="button" value="data1.txt" 
       onclick="$('#canvasMyID').jQchart('./data0.txt')">

[Data file] data0.txt
{
  data : [
    [333,555,888,445,666,999,333]
  ]
};

Canvas Width&Height; 幅と高さなどの指定方法

(以下、jquery.jsとexcanvas.jsのロード部分は省略)

width,height

キャンバスの幅と高さ(widthとheight)は、「drawの引数＞canvas要素の属性＞デフォルト値(w300,h150)」の優先順位で決まります

Setting by Arguments 1 (引数でセッティング1)

[HTML file] widthheight0.htm
<canvas id="canvasMyID"></canvas>
<script type="text/javascript">
var chartSetting={
	config : { 
		width: 600 , 
		height : 300 
	},
	data : [[300,500,600,700,888,777,666]]
};
$('#canvasMyID').jQchart(chartSetting);
</script>

Setting by Arguments 2 (引数でセッティング2)

[HTML file] widthheight3.htm
<canvas id="canvasMyID"></canvas>
<script type="text/javascript">
$(function (){
	var oj=$('#canvasMyID');
	oj.jQchart({
		config : {
			width  : 500, 
			height : 200
		},
		data : [[300,500,600,700,888,777,666]]
	})
});
</script>

Canvas Attribute (Canvas要素の属性値でセッティング)

[HTML file] widthheight1.htm
<canvas id="canvasMyID" width="600" height="300"></canvas>
<script type="text/javascript">
$(function(){
	$('#canvasMyID').jQchart({ data : [[300,500,600,700,888,777,666]]});
})
</script>

However

jQueryのcssやattrメソッドでは、width heightをセッティングできませんでした

(*canvasの属性について要チェック)

<canvas id="canvasMyID"></canvas>
<script type="text/javascript">
$('#canvasMyID').jQchart.draw({
  data   : [[300,500,600,700,888,777,666]]
})
  .css('width', '600px')
  .css('height','300px');
</script>

paddingL,paddingT

チャート領域のパディング位置

[HTML file] padding0.htm
<canvas id="canvasMyID"></canvas>
<script type="text/javascript">
var chartSetting={
	config : { 
		width    : 600 , 
		height   : 300 ,
		paddingL : 30, 
		paddingT : 100,
		title    : 'paddingTを100pxも取ったので<br>\
		Title部分に結構lt;br>\
		ゆとりあります。'
	},
	data : [[300,500,600,700,888,777,666]]
};
$(function (){
	$('#canvasMyID').jQchart(chartSetting);
});
</script>

メモ追加予定

jQchartの HTML＋CSS＋JS 構造
jQchartのDOM(HTML)構造について
CSS ID名とクラス名の規則について
JS について
Ajaxでサクサク使う件
Canvasのいじり方
ドラッグドロップ
プロパティ一覧
メソッド一覧
サンプル

Old version
| test2 b | slider bar |