カテゴリ： javascript

2012年11月29日

jsでグラフ書くならdygraph.jsが良いと思うよ

最近すっかりグラフ厨になってるんですが、ちょっとした解析ツールとかにグラフあったらいいなーなんて思う事ありますよね？

webアプリで使うならjsでグラフ書けると色々使い勝手がいいんですけど、毎回どのライブラリがいいかなー？と悩む訳ですよ。Highcharts.jsは格好いいけど、商用利用は有料だし・・しかも結構高いし・・

そんな中、「これでFAで良いんじゃないの？」ってのがあったので紹介してみます。

dygraphs.jsといいます。他にも幾つかライブラリを試してみたんですが、これはかなりシンプルに書けるわりに、高機能だったのが良かった。なかなか書き方の参考になりそうなところ見つからなかったので、幾つかサンプル残しておこうと思います。

一番シンプルなグラフ

こんな感じに書くだけです。データはCSV形式でシンプルな受け渡し。

<script type="text/javascript" src="dygraph-combined.js"></script>
<script type="text/javascript">
  container = document.getElementById("graphdiv");
  g = new Dygraph(container,
    "Date,Temperature\n" +
    "20121128,12\n" +
    "20121129,16\n" +
    "20121130,14\n" +
    "20121201,12\n" +
    "20121202,9\n" +
    "20121203,13\n" +
    "20121204,14\n"
  );
</script>

デフォルトでドラック&ドロップで範囲を絞ることができます。

複数行のケース

複数のグラフ書くのは、CSVに列追加するだけ。

<script type="text/javascript" src="dygraph-combined.js"></script>
<script type="text/javascript">
  container = document.getElementById("graphdiv");
  g = new Dygraph(container,
    "Date,Tokyo,NewYork\n" +
    "20121128,12,5\n" +
    "20121129,16,6\n" +
    "20121130,14,6\n" +
    "20121201,12,6\n" +
    "20121202,9,8\n" +
    "20121203,13,12\n" +
    "20121204,14,10\n"
  );
</script>

沢山のデータ表示

ベタに書かなくてもcsvファイルを指定することも可能

<script type="text/javascript" src="dygraph-combined.js"></script>
<script type="text/javascript">
  container = document.getElementById("graphdiv");
  g = new Dygraph(container,"graph3.csv");
</script>

使ったCSVはこんな感じです

Date,Data1,Data2,Data3,Data4,Data5,Data6,Data7,Data8,Data9,Data10
20121120,0,0,0,0,0,875,25,80,3035,0
20121121,0,2575,0,2950,0,1775,0,250,5900,4475
20121122,0,5725,0,3000,0,2000,0,145,9510,9350
20121123,0,4325,0,2525,0,2000,0,150,7735,5375
20121124,0,3750,0,2425,0,1600,1150,165,7330,5175
20121125,0,3075,0,2000,0,800,2125,925,6885,4800
20121126,0,2400,0,1400,0,675,1800,1485,6350,4275
20121127,0,2100,125,1525,0,2725,1250,1150,5950,3200
20121128,0,2475,1625,1125,0,2885,1350,1140,5725,2775
20121129,0,2525,1805,775,1510,2425,1650,820,5290,2575
20121130,560,2125,2050,800,3020,2650,975,880,5865,2900
20121201,975,1900,1840,850,2510,2525,700,1130,5320,2525
20121202,1000,1650,1810,750,2810,2325,1825,900,5330,2250
20121203,1200,1900,2020,700,2785,2575,1075,935,4690,2375
20121204,1075,2025,1860,700,2045,2425,1225,720,5065,2100

より複雑な例

上のケースだとデータ量が多すぎて視認性が悪いので、色々オプションを加えます

グラフのハイライト
クリック時のハイライト固定
ラベルリストの外だし
データのオン/オフスイッチ
レンジセレクタ

色々触ったりクリックしたりすると感じが解ると思います。

若干コードが長くなりますが、一つ一つはシンプルです。CSVは上の例からヘッダ行とっただけ（ラベルの外だしするため）。

<script type="text/javascript" src="dygraph-combined.js"></script>
<script type="text/javascript">
  // クリック時に実行されるcallback、ハイライトを固定する
  var makeClickCallback = function(graph) {
    var isLocked = false;
    return function(ev) {
      if (isLocked) {
        graph.clearSelection();
        isLocked = false;
      } else {
        graph.setSelection(graph.getSelection(), graph.getHighlightSeries(), true);
        isLocked = true;
      }
    };
  };

  // グラフ描画ロジック
  container = document.getElementById("graphdiv");
  labels = document.getElementById("labels");
  labels_arr = ['Date','Data1','Data2','Data3','Data4','Data5','Data6','Data7','Data8','Data9','Data10'];
  g = new Dygraph(
    container,
    "graph4.csv",
    {
       labels: labels_arr, // ラベル名指定
       labelsDiv: labels,  // ラベル表示位置
       showRangeSelector: true, // 表示範囲セレクターを表示
       labelsSeparateLines: true, // ラベルの後ろに改行挟む
       highlightSeriesOpts: {  // ハイライトの設定
         strokeWidth: 3,
         strokeBorderWidth: 1,
         highlightCircleSize: 5
       }
  });
  // クリック時のcallback指定
  g.updateOptions({clickCallback: makeClickCallback(g)}, true);

  // 表示非表示切り替え
  function change(el) {
    g.setVisibility(parseInt(el.id), el.checked);
  }
</script>

コールバックや表示切り替え部分はそのまま流用できるし、その他はオプションだけで設定できます。ライブラリ自体がかなり大きくて、他にも色々な機能があるのでデモを見ると解ると思います。ここで紹介した以外に、グラフの特定箇所に記しをつけるannotationなんかを使っています。

デモが幾つか分散していて、ギャラリータイプのと独立しているものがあります。お目当てを探すのが面倒なのですが、始めにざっと見て何ができるか把握すると良さそうです。

オススメです。

2007年07月23日

はてなすたー入れてみたよ☆

最近話題の「はてなスター」を入れてみました。ついさっき設置完了しました。この発想はひじょーに面白いですね。昔ははてなは技術者嗜好なアプリケーションを作っていたイメージで、ちょっと一般人には敷居が高いイメージでしたけど、Rimoといい、このはてなスターといい、一般ユーザーフレンドリーな感じがします。設置も、Javascriptをblogに加えるだけとお手軽なのも良い感じ。条件はブログのエントリタイトルに<h3>で囲っている事と、タイトルにパーマリンク（記事単体への固定のリンク）があることです。多くのblogがタイトルは<h3>で、パーマリンクがついていると思うのですが、もしついていなかった場合は、パーマリンクって言葉が一般ユーザーにわかるのでしょうか？？ちょっと気になります。とはいえ、その辺りは段々Hackされてくるんでしょうけどね。ちなみにid:naoyaさんのblogによると、id:jkondoさんの発案みたいです。とても「らしい」サービスな感じがしています。

2007年05月09日

OOJS2

昔書いたものですが、再利用します。オブジェクト思考だから。前に書いたOOJS続きです。

Javascriptでの継承とオーバーライド

前回Javascriptでのオブジェクト指向プログラミングを見てきました。今回は継承とオーバーライドについてお話します。Javascriptでは継承はcall()とapply()を使います。

call()メソッドを使った継承の例

下のコードを見てみてください。

<html>
<body>
<script type="text/javascript">
function Person(_name, _email) {
  this.name = _name;
  this.email = _email;
  this.show = function () {
    document.writeln("  名前      : " +  this.name + "</br>");
    document.writeln("  Eメール : " +  this.email + "</br><hr>");
  }
}
function Manager(_name, _email, _roll) {
  Person.call(this, _name, _email);
  this.roll = _roll
  this.show = function () {
    document.writeln("  名前      : " +  this.name + "</br>");
    document.writeln("  Eメール : " +  this.email + "</br>");
    document.writeln("  役職        : " +  this.roll + "</br><hr>");
  }
}
var taro = new Person("太郎", "taro@example.com");
taro.show();
var hanako = new Manager("花子", "hanako@example.com", "部長");
hanako.show();
</script>
</body>
</html>

Person関数はnameとemailというプロパティを持っています。また、プロパティを表示するshow()というメソッドを持っています。ここで、役職を持っているAdminという関数が必要になったとします。役職を識別するrollというプロパティが新たに必要です。勿論Adminにもnameとemailはあるでしょう。こういった場合、Personを継承してAdminという関数（クラス）を作るのが良いです。

function Manager(_name, _email, _roll) {
  Person.call(this, _name, _email);
  this.roll = _roll
  this.show = function () {
    document.writeln("  名前      : " +  this.name + "</br>");
    document.writeln("  Eメール : " +  this.email + "</br>");
    document.writeln("  役職        : " +  this.roll + "</br><hr>");
  }
}

ポイントは、Person関数をcall()メソッドで読んでいる所です。 call()メソッドはFunctionオブジェクトが持つメソッドで、関数に引数を渡しています。また、showメソッドを上書きしています。継承元の関数を、継承した関数で上書きすることをオーバーライドと言います。これでオブジェクト指向プログラミングのポリモフィズムは実現できそうです。ただし、オーバライドを含む継承の際にはcall()を呼ぶ場所に注意してください。試しに下記コードを実行してみてください。 call()を呼ぶ位置を一番下にしてみました。

function Manager(_name, _email, _roll) {
  this.roll = _roll
  this.show = function () {
    document.writeln("  名前      : " +  this.name + "</br>");
    document.writeln("  Eメール : " +  this.email + "</br>");
    document.writeln("  役職        : " +  this.roll + "</br><hr>");
  }
  Person.call(this, _name, _email);
}

Person関数のなかでもthis.showプロパティにファンクションを代入しているため、showがオーバーライドされてしまっていますね？ほとんどの場合、は先頭で呼んでおけば問題は無いと思います。

apply()メソッドを使った継承の例

ほとんどcall()の場合と変わりません。

<html>
<body>
<script type="text/javascript">
function Person(_name, _email) {
  this.name = _name;
  this.email = _email;
  this.show = function () {
    document.writeln("  名前      : " +  this.name + "</br>");
    document.writeln("  Eメール : " +  this.email + "</br><hr>");
  }
}
function Manager() {
  Person.apply(this, arguments);
  this.roll = arguments[2];
  this.show = function () {
    document.writeln("  名前      : " +  this.name + "</br>");
    document.writeln("  Eメール : " +  this.email + "</br>");
    document.writeln("  役職        : " +  this.roll + "</br><hr>");
  }
}
var taro = new Person("太郎", "taro@example.com");
taro.show();
var hanako = new Manager("花子", "hanako@example.com", "部長");
hanako.show();
</script>
</body>
</html>

apply()メソッドは可変長引数に対応しています。但し、IEではサポートしていないので、注意が必要です。

Javascriptでのオーバーロード

Javascriptではオーバーロードは可能でしょうか？オーバーロードとは、同じ名前のメソッドですが引数の数を変えることで、別のメソッドとして扱う事です。下のコードはJavaでのオーバーロードの例です。

class hoge() {
  //　省略
  void example(String strVal) {
    // 処理１
  }
  void example(String strVal, int intVal) {
    // 処理２
  }
}

上記の様な同名のメソッドが合った場合、example("文字列")と呼び出せば、処理１が実行されます。example("文字列", 1)と呼び出された場合、処理２が実行されます。感の良い皆様はおわかりだと思いますが、Javascriptにおいてはオーバーロードは実装出来ません。 Javascriptのメソッドはあくまでプロパティと同じ扱いなので、上記の用に書いた場合、２個目のファンクションで１つめのファンクションが上書きされてしまいます。 Javaにおいてはメソッドを識別するのに、メソッド名と引数の定義を使っています。コレをメソッド・ディスクリプタと言います。 Javascriptではプロパティ名としか認識していませんし、可変長引数が有るため、引数の定義でメソッドを識別出来ないためですね。誠に残念ではありますが、此処は泣いて馬謖を斬るしか有りません。これでオブジェクト指向プログラミングの最低限の道具はそろいました。

タグ：: #javascript

2007年04月19日

OOJS

最近、昔書いた物をあれこれまとめ中です。折角編集したのでここに、さらします。オブジェクト指向を説明するのに使ったもの。 JavaScriptとJavaを説明に使っています。Object Oriented JavaScriptって奴です。途中変なテンションになっているのはご容赦下さい。

オブジェクト指向についてのおさらい

まず、オブジェクト指向についておさらい。オブジェクト指向言語Javaで書いてサンプルを見てみましょう。

class Dog {
	String name;
	Dog(String name) {
		this.name= name;
	}
	String bark() {
		return name + "[わん]";
	}
}
public class BarkCall {
	public static void main(String[] args) {
		Dog pochi = new Dog("ポチ");
		Dog taro = new Dog("タロー");
		System.out.println(pochi.bark());
		System.out.println(taro.bark());
	}
}

実行結果はこうなります。

[oojs azazel]$ java BarkCall
ポチ[わん]
タロー[わん]

シンプルなオブジェクト指向の一例です。 Dogクラスのインスタンスである”pochi”と"taro"に泣けとメッセジーを送ると、自分の名前と共に、[わん]と泣きます。コレはあたかも、現実世界の犬に”お手！”とメッセージを送っているようなモノです。次にオブジェクト指向の神髄の一つ、ポリモフィズム（多態性）について見てみましょう。

abstract class Animal {
	abstract String cry(); 
}
class Dog extends Animal{
	String cry() {
		return "わん!";
	}
}
class Baby extends Animal{
	String cry() {
		return "おぎゃー!";
	}
}
class Cat extends Animal{
	String cry() {
		return "にゃー!";
	}
}
public class CryCall {
	public static void main(String[] args) {
		Animal dog = new Dog();
		Animal baby = new Baby();
		Animal cat = new Cat();
		System.out.println(dog.cry());
		System.out.println(baby.cry());
		System.out.println(cat.cry());
	}
}

ポリモフィズムのメリットは２点あります。一点目はAnimalクラスに実装の無い抽象メソッド、cry()を定義している点。こうすることで、Animalを継承したクラスには、cry()メソッドを実装する事を強制出来ます。つまり、必ず必要なインターフェースを統一出来るのです。二点目は継承してクラスの実体（インスタンス）は、スーパークラスの型に代入出来る点です。こうすることで、インスタンスを利用する側は、今、「泣け！」とメッセージを送った相手が、Dogであるのか、Babyであるのか、Catであるのか意識する必要がないのです。これは、あたかも「現実のモノに対してメッセージを送る」というように、現実社会のあり方に沿った自然な書き方なんです。オブジェクト指向万歳！・・・・なんて説明をよく聞きますけど、理解できますか？私は出来ませんでした。そもそも「動物」って動物を現実社会で見たことは有りません。私の考えるオブジェクト指向のメリットは非常に単純です。「コードを書く量を減らす->修正が楽になる＝開発が楽になる。」それだけです。オブジェクト指向の神髄とメリットを実感するなら、デザインパターンを学ぶのが良いと思いますが、それはまた次回に。

OOJS(Object Oriented JavaScript)

とにかく、JavaScriptでオブジェクト指向を実装してみましょう。

単純なクラスの例

基本的に変わらないのですが、ちょっとだけ癖が有ります。今度は単純にDogクラスを実装してみます。

<html>
<body>
<script type="text/javascript">
function Dog(_name) {
	this.name = _name;
}
var dog = new Dog("ポチ");
document.writeln(dog.name);
</script>
</body>
</html>

此処まではほとんどかわりませんよね？ではbarkメソッドを追加してみましょう。

<html>
<body>
<script type="text/javascript">
function Dog(_name) {
	this.name = _name;
	this.bark = bark
}
function bark() {
	document.writeln(dog.name + " : わん！")
}
var dog = new Dog("ポチ");
dog.bark();
</script>
</body>
</html>

Javaの場合と違うのは、~~クラス、メソッドという概念ではなく、~~bark()というファンクションを、Dogのthis.dogというプロパティに代入している事です。また、JavaScriptの無名関数という方法で以下の用に書くことも出来ます。

<html>
<body>
<script type="text/javascript">
function Dog(_name) {
	this.name = _name;
	this.bark = function () {
		document.writeln(dog.name + " : わん！");
	}
}
var dog = new Dog("ポチ");
dog.bark();
</script>
</body>
</html>

また、JavaScriptならではの特徴も有ります。「メンバ（メソッド）の後付」です。下記コードを見てください。

<html>
<body>
<script type="text/javascript">
var obj = new Object();
obj.bark =  function () {
	document.writeln("  わん！");
}
obj.bark();
</script>
</body>
</html>

いかがでしょう？クラス、メソッドという概念ではなく、あくまで、プロパティに関数を代入しているだけというのがおわかり頂けましたか？では、もう一つ実験です。今度はオブジェクトを２つ作ってみましょう。きっと上手く行くはずです。

<html>
<body>
<script type="text/javascript">
var obj1 = new Object();
obj1.bark =  function () {
	document.writeln("  わん！");
}
var obj2 = new Object();
obj2.bark(); // ここでエラーになる
</script>
</body>
</html>

エラー！？なんて事でしょう。もう絶望です。JavaScriptではオブジェクト指向を実装出来ないのでしょうか？

prototypeという解法

いいえ、そんな事は有りません。上記のコードでは、インスタンスであるobj1のプロパティに対してのみbarkメソッドを追加していました。クラスであるObjectはこの時点では、変化が及んでいないのでObjectをインスタンス化したobj2には、barkプロパティが存在しないためエラーとなってしまいました。ではどうすれば良いのでしょうか？ JavaScriptにはprototypeという特殊なプロパティが有ります。

<html>
<body>
<script type="text/javascript">
Object.prototype.bark =  function () {
	document.writeln(" わん！");
}
var obj1 = new Object();
var obj2 = new Object();
obj1.bark(); 
obj2.bark(); 
</script>
</body>
</html>

いかがでしょう？問題なく表示されましたね。 JavaScriptの決まりごとで、prototypeプロパティには、prototypeオブジェクトという特殊なオブジェクトが代入されます。 prototypeプロパティは、その関数をインスタンス化した場合のインスタンス参照（prototypeオブジェクト）が代入される事になっています。つまり、prototypeプロパティが宣言された関数から生成されたインスタンス全てに影響が及びます。現実的な事をいえば、Object関数は全てのオブジェクトの基底関数（クラス）ですので、下手にプロパティを追加すると、全てのインスタンスに影響が及んでしまいます。あまり不用意に使うべきでは無いでしょう。

タグ：: #javascript

2006年06月06日

javascriptのUIエフェクトライブラリ「UIZE」

またスゴイUIライブラリ発見してしまった。 UIZEというUI用のjavascriptライブラリ。作者はChris van Rensburg。 Prototype.jsやscript.aculo.usの様な巨大ライブラリ群で45ファイルからなっている。画像をwipe処理で切り替えられるUize.Wipeクラスや、スライダーインターフェース、カラーミキサーなどのインターフェースを提供するUize.Widgetクラス群。果には、テーブルのソート機能まで提供している。

ajaxianより特にwipeクラスがカッコ良すぎ！是非サンプルを見てもらいたい。最近のjsライブラリにしては珍しくPrototype.js非依存なようだ。ちなみに、GPL(General Public License)

タグ：: #javascript

↑このページのトップヘ