【Javascript】jQuery でCSVをテーブル表示

jQchartと組み合わせてみる

CSVファイルを読み込んで表にしただけでは物足りないので、前回の jQchartと組み合わせてみました。

csv2tableでCSV読み込み→(onload)→jQchartでグラフ化 という流れになっています。

v0.02から、jQchartをuseプロパティで呼び出すことができるようになりましたのでその方法で書いてみます。{use:'jqchart:line#キャンバス要素のID'}という書き方で、1行目と1列目に項目名のあるサンプルのような形式のCSVなら自動的にグラフ表示されます。

もちろん、onloadによるコールバック関数でさまざまな加工をすることも可能です。



ソースは次の通り。

読み込んだCSVファイル /gm/gc/24176/file/book4chart.txt

" " ,3,4,5,6,7,8,9,10,11,12,1,2
Test1,30,40,25,45,70,55,80,90,65,95,96,88
Test2,12,15,55,30,70,87,55,30,65,76,50,58
Test3,60,43,58,22,38,47,35,67,88,53,92,98

用意するテキストファイルは1行目が項目行、1列目が各項目タイトル、それ以外はグラフデータ用の数値という形式にしてあります。

もちろん、この形式でなければいけないということはありません。エクセルワークシート上のどの場所でも、 jQchartのデータとして整形して流し込みさえすれば使えます。

<!--[if IE]>
<script src="./excanvas-compressed.js" 
        type="text/javascript" ></script>
<![endif]-->
<script src="./jquery-1.2.3.min.js" 
        type="text/javascript"></script>
<script src="./jquery.jqchart-0.02-b-1.7.js" 
        type="text/javascript"></script>
<script src="./jquery.csv2table0.01-beta-8.js" 
        type="text/javascript"></script>

<script type="text/javascript">
$.extend($.csv2table,{
  loadImg  : './icon-loadinfo.gif',//now loadingカスタマイズ画像
  sortDImg : './icon-d.gif',       //降順カスタマイズ画像
  sortAImg : './icon-a.gif'        //昇順カスタマイズ画像
})
</script>

<style>
/* ラベル Y軸 */
.jQchart-labelY-canvasMyID{
	font-size : 12px;
}

/* label Data */
.jQchart-labelData-canvasMyID{
	font-size : 10px;
}
</style>

<canvas id="canvasMyID" height="200"></canvas>
<div id="view40"></div>

<input disabled
       class="btn1"
       type    =  "button"
       onclick="$('#view40').csv2table('./file/book4chart.txt',{
         use      : 'jqchart:line#canvasMyID',
         title    : 'This HTML is setting.config.<b>title2</b>',
         scaleY   : {min: 0,max:100,gap:10}
       });"
       value="Load CSV">
       

そのほかのデモは、jquery.csv2table.js test、バージョンアップなどの情報は、 csv2tableなどをご覧ください。