今回は、HTMLとCSSとJSの分離のことも(多少)考えつつ作ってみました。使うには、それぞれの構造把握がポイントです。HTMLは、canvasをラップするDIVを頂点としてすべてのボックスがぶら下がっています。ID名とCLASS名には命名規則を決めておいたので、それで.css外部ファイルからデザインします。JavaScriptは、当然、jQueryのネームスペース$.fn 内にすべてのオブジェクトを収めました、などなど。

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>

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

[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]
  ]
};

[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]
  ]
};

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

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

width,height

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

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 : 50,
		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 |

jquery.jQchart

Minimum 最小構成

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

width,height

paddingL,paddingT