お試しあれ！: ｊQuery

ラベル ｊQuery の投稿を表示しています。すべての投稿を表示

2012年5月29日火曜日

JQueryを使ったページを書くときの雛形

よく使うのでメモ

<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<body>
<script>
$(document).ready(function() {
 $('#test a').click(function(){
  $(this).text('hello');
 });
});
</script>
<div id="test"><a href="#">クリックして！</a></div>
</body>

</html>

2012年5月16日水曜日

jQueryでcsvをjavascriptの配列に変換

前回の記事で紹介したcsvをjavascriptに変換するスクリプト「jQuery_csv.js」

こんな感じでファイルをgetで読み込んでcsv()に渡してあげるだけ（＾＾

$.get('data.csv', function (data) {
  var csv = $.csv()(data);
 });

持っておくと便利なライブラリですね＾＾

/* Usage:
 *  jQuery.csv()(csvtext)               returns an array of arrays representing the CSV text.
 *  jQuery.csv("\t")(tsvtext)           uses Tab as a delimiter (comma is the default)
 *  jQuery.csv("\t", "'")(tsvtext)      uses a single quote as the quote character instead of double quotes
 *  jQuery.csv("\t", "'\"")(tsvtext)    uses single & double quotes as the quote character
 */
;
jQuery.extend({
    csv: function(delim, quote, linedelim) {
        delim = typeof delim == "string" ? new RegExp( "[" + (delim || ","   ) + "]" ) : typeof delim == "undefined" ? ","    : delim;
        quote = typeof quote == "string" ? new RegExp("^[" + (quote || '"'   ) + "]" ) : typeof quote == "undefined" ? '"'    : quote;
        lined = typeof lined == "string" ? new RegExp( "[" + (lined || "\r\n") + "]+") : typeof lined == "undefined" ? "\r\n" : lined;

        function splitline (v) {
            // Split the line using the delimitor
            var arr  = v.split(delim),
                out = [], q;
            for (var i=0, l=arr.length; i<l; i++) {
                if (q = arr[i].match(quote)) {
                    for (j=i; j<l; j++) {
                        if (arr[j].charAt(arr[j].length-1) == q[0]) { break; }
                    }
                    var s = arr.slice(i,j+1).join(delim);
                    out.push(s.substr(1,s.length-2));
                    i = j;
                }
                else { out.push(arr[i]); }
            }

            return out;
        }

        return function(text) {
            var lines = text.split(lined);
            for (var i=0, l=lines.length; i<l; i++) {
                lines[i] = splitline(lines[i]);
            }
            return lines;
        };
    }
});

2012年5月15日火曜日

Highchartsを使ってcsvデータを読み込んでグラフ化するサンプル（前編）

webコンテンツの中で、キレイなグラフが使えないかと色々と探してみて見つけたのがコレ。キレイなグラフが簡単に作れるライブラリHighcharts。とりあえずサンプルを元に試してみた。

今回のメモは、サンプルソースを少し改良して、csvデータを読み込んでグラフ化することにします。
1.　まずは、jQueryをインポート
-googleでホストされているコードを読み込むのでこのままコピペ

2.　ダウンロードしたファイルからjsフォルダをアップロード
3.　jQuery_csv.jsをアップロード（別記事で掲載予定）
4.　index.htmlに以下のコードを貼り付ける
2～19行目　：　csvデータを読み込んで配列mydataへjavascriptの配列として代入
・　htmlファイルと同じフォルダの「data.csv」を読み込む
・　csv()関数（jquery_csv.js）を使いデータを変換
・　mydataに代入

21行目から　：　グラフ作成用のパラメータ設定
・　23行目：　グラフの種類をラインチャートに設定してidがcontainerのDIVタグに挿入
・　27行目：　グラフのタイトル
・　30行目：　サブタイトル
・　33行目：　x軸のラベル（1つめが日本語なのは、日本語表示用のテスト
・　36行目：　y軸のラベル（表示を見れば目盛りが自動的に振られているっ！）
・　41行目：　マウスオーバー時のツールチップ
・　48行目：　凡例部分かな（？）

56行目から　ここから、グラフのデータ

series：[
name:　ラベル名
data：　データ部
]

なのですが、ここでcsvから読み込んだ配列を63行目のように設定してあげるといいみたい。

※45行目は改行しないで44行目に続けて入力

$(function () {
 var mydata=[];
 $.get('data.csv', function (data) {
  var csv = $.csv()(data);
  $(csv).each(function () {
   mydata.push( [parseFloat( this[0] ),
    parseFloat( this[1] ),
    parseFloat( this[2] ),
    parseFloat( this[3] ),
    parseFloat( this[4] ),
    parseFloat( this[5] ),
    parseFloat( this[6] ),
    parseFloat( this[7] ),
    parseFloat( this[8] ),
    parseFloat( this[9] ),
    parseFloat( this[10] ),
    parseFloat( this[11] )
    ] );
  })

  var chart;
  chart = new Highcharts.Chart({
   chart: {
    renderTo: 'container',
    type: 'line'
   },
   title: {
    text: 'Monthly Average Temperature'
   },
   subtitle: {
    text: 'Source: WorldClimate.com'
   },
   xAxis: {
    categories: ['1月', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
   },
   yAxis: {
    title: {
     text: 'Temperature (°C)'
    }
   },
   tooltip: {
    enabled: false,
    formatter: function () {
     return '<b>' + this.series.name + '</b>
' + this.x + ': ' + this.y + '°C';
    }
   },
   plotOptions: {
    line: {
     dataLabels: {
      enabled: true
     },
     enableMouseTracking: false
    }
   },
   series: [{
    name: '東京',
    data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
   }, {
    name: '神戸',
    data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
   },{
    data: mydata[0],
    name:'sample'
   }]
  });
 });

});

5.　body部にスクリプトの読み込みとDIVタグを設置


<script src="./js/highcharts.js">
</script>
  <script src="./js/modules/exporting.js">
</script>
  <div id="container" style="height: 400px; margin: 0 auto; min-width: 400px;">
</div>

とりあえず完成実は見よう見まねで作っているので、もっといい方法があるはずです。、わかる方教えてください（笑）