1/5

1,2,3,2,2

226,134

5,3,9,6,5,9,7,3,5,2

0,-3,-6,-4,-5,-4,-7,-3,-5,-2

5,3,9,6,5,9,7,3,5,2,5,3,9,6,5,9,7,3,5,2

5,3,9,6,5,9,7,3,5,2

5,3,2,-1,-3,-2,2,3,5,2

0,-3,-6,-4,-5,-4,-7,-3,-5,-2

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.peity.min.js"></script>
<script>
	$(window).load(function(){
		$('#Peity .Peity-demo.pie').peity('pie', {
			width: 150,
			height: 150
		});

		$('#Peity .Peity-demo.line').peity('line', {
			width: 150,
			height: 70
		});

		$('#Peity .Peity-demo.bar').peity('bar', {
			width: 150,
			height: 70
		});
		
		var updatingChart = $('#Peity .Peity-demo.updating-chart').peity('line', {
			width: 150,
			height: 70
		})
		
		setInterval(function() {
			var random = Math.round(Math.random() * 10)
			var values = updatingChart.text().split(",")
			values.shift()
			values.push(random)
			
			updatingChart
			.text(values.join(","))
			.change()
		}, 1000);
	});
</script>
<div class="Peity-box">
	<p><span class='pie Peity-demo'>1/5</span></p>
	<p><span class='pie Peity-demo'>1,2,3,2,2</span></p>
	<p><span class='pie Peity-demo'>226,134</span></p>
	<p><span class='line Peity-demo'>5,3,9,6,5,9,7,3,5,2</span></p>
	<p><span class='line Peity-demo'>0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span></p>
	<p><span class='updating-chart Peity-demo'>5,3,9,6,5,9,7,3,5,2,5,3,9,6,5,9,7,3,5,2</span></p>
	<p><span class='bar Peity-demo'>5,3,9,6,5,9,7,3,5,2</span></p>
	<p><span class='bar Peity-demo'>5,3,2,-1,-3,-2,2,3,5,2</span></p>
	<p><span class='bar Peity-demo'>0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span></p>
</div>

Peityについて

Peityは、SVGを利用して色々なグラフをブラウザ上に描画できるプラグインです。
イベントと連動できるので、使い道は色々ありそうです。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • Chart

    Chart

    バラエティー豊富でインタラクティブなグラフを設置できる

  • Knob

    Knob

    ついつい回したくなる円グラフを設置できる

  • Flot

    Flot

    とても豊富な機能を備えたグラフ描画プラグイン