|++かも日記| jQuery › Downloads › Plugins › jQchart | nightly.htm|
Canvas+jQuery (Ajax & Draggable)ダブルクリックでドラッグ&停止もできます


Allabout-->棒グラフとグラデーション New version is-->jQchart + CanvasGradient

/ /


see data | data1.txt| data2.txt| data3.txt| data4.txt| data5.txt| data03.txt |

if you dblclick the chart, you can drag.


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

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


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


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>
OR
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>
OR
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>

メモ追加予定


Old version
| test2 b | slider bar |