EaselJSでインタラクティブなグラフを描こう

Tag

# ユーザインタフェース

# ライブラリ

# 解説

Yu Nejigane

Engineer

先日、paper.jsによるグラフ描画について触れましたが、今回はflashのようにcanvasを使うことのできるJavascriptライブラリ「EaselJS」を使ったグラフ描画について少しご紹介したいと思います。

EaselJSでは、ShapeやBitmap、TextといったDisplayObjectをStageにaddChildしてディスプレイリストを作ることで、Stageに紐付けられたcanvasにその内容が描画されます。 ActionScriptに慣れている開発者には馴染みやすいやり方です。onClickなどのイベントハンドラもDisplayObjectごとに設定することができ、アニメーションも勿論可能。

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="easel.js"></script>
    <script type="text/javascript">
      window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var stage = new Stage(canvas);

        var shape = new Shape();
        shape.graphics.beginFill('#f00').drawCircle(100, 100, 100);
        stage.addChild(shape);

        var label = new Text("hoge", "30px Arial", "#000");
        label.x = 70;
        label.y = 110;
        stage.addChild(label);

        stage.update();
      };
    </script>
  </head>
  <body>
    <canvas id="myCanvas" width="300" height="300"></canvas>
  </body>
</html>

先日の記事と同様、クリックに反応する棒グラフを実装してみました。見た目にはほとんど変わりませんが、EaselJSで実装しています。

bar graph using EaselJS – jsdo.it – share JavaScript, HTML5 and CSS

paper.jsと同じく、プロジェクトサイトにはデモやAPIドキュメントが揃っています。（冒頭の画像はEaselJSによるgameデモのスクリーンショットです。）

Tag

# ユーザインタフェース

# ライブラリ

# 解説