jQueryのプラグインである”jQuery sparkline”を使用すると、webページ内に小さなグラフを埋め込む事ができます。
基本形
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://omnipotent.net/jquery.sparkline/1.6/jquery.sparkline.min.js"></script>
<script type="text/javascript">
$(function() { $('.test1a').sparkline(); });
</script>
test1:<span class="test1a">1,2,3,2,5,2,3,2,1</span> |
test1:1,2,3,2,5,2,3,2,1
値はコメント内でもOK
test2:<span class="test2"><!-- 1,2,3,2,5,2,3,2,1 --></span> |
test2:1,2,3,2,5,2,3,2,1
プログラムから動的に値をセット
<script type="text/javascript">
var data = [3,1,4,1,5,9,2,6,5];
$('.test3').sparkline( data );
</script>
test3:<span class="test3"></span> |
test3:
棒グラフもOK
<script type="text/javascript">
/* ピンクの棒グラフ */
$('.test4').sparkline('html', {type: 'bar', barColor: '#ff9999'} );
</script>
<span class="test4">1,2,3,2,5,2,3,2,1</span> |
test4:1,2,3,2,5,2,3,2,1
**参考資料**
sparklineの仕様:jQuery Sparklines
Beautiful Visualizationに寄稿されたsparklineの情報:Sparklineによるアクセス履歴視覚化
関連記事
コメントを残す