Movable Type 備忘録

 テーブルからグラフを生成する JavaScript ライブラリ（Bluff）

  • Sep222008
  • Vote:
    http://bizcaz.com/archives/2008/09/22-220643.php
  • Categories: JavaScript
  • Tags:
  • Social Bookmark

こんばんわ^^

MOONGIFT さんとこで、テーブルからグラフを生成できる JavaScript ってのが紹介されてたのでやってみました。

実際には CANVAS が使われてます。
以前ご紹介した パイ・チャートを表示してみる（amCharts）ではフラッシュを使ってパイ・チャートを表示することができました。
それに比べると見劣りしますが、テーブルの内容を読み取って JavaScript で折れ線グラフを表示させるものなので、Ajax を使って動的にテーブルを出力するようにすればいろんなデータ表示ができそうなかんじです (●´∀｀●)

まぁそこら辺は次回ということで、今回は Bluff の使い方のご紹介です。

実際にどんなかんじになるかは以下のページをご覧ください。

テーブルの作り方

上記サンプルの元データとなるテーブルを以下に記します。

テーブル(データ)

  1. <table id="data">
  2. <caption>Annual Fruit Sales</caption>
  3. <thead>
  4.     <tr>
  5.         <th></th>
  6.         <th>Apples</th>
  7.         <th>Oranges</th>
  8.         <th>Watermelon</th>
  9.         <th>Peaches</th>
  10.     </tr>
  11. </thead>
  12. <tbody>
  13.     <tr>
  14.         <th></th>
  15.         <td>1</td> <td>4</td> <td>2</td> <td>9</td>
  16.     </tr>
  17.     <tr>
  18.         <th>2003</th>
  19.         <td>2</td> <td>8</td> <td>3</td> <td>9</td>
  20.     </tr>
  21.     <tr>
  22.         <th></th>
  23.         <td>3</td> <td>7</td> <td>1</td> <td>10</td>
  24.     </tr>
  25.     <tr>
  26.         <th>2004</th>
  27.         <td>4</td> <td>9</td> <td>5</td> <td>8</td>
  28.     </tr>
  29.     <tr>
  30.         <th></th>
  31.         <td>4</td> <td>8</td> <td>6</td> <td>7</td>
  32.     </tr>
  33.     <tr>
  34.         <th>2005</th>
  35.         <td>3</td> <td>9</td> <td>8</td> <td>9</td>
  36.     </tr>
  37. </tbody>
  38. </table>

上記コードは以下のようなテーブルです。

Annual Fruit Sales
Apples Oranges Watermelon Peaches
1 4 2 9
2003 2 8 3 9
3 7 1 10
2004 4 9 5 8
4 8 6 7
2005 3 9 8 9

各カラム( Apples、Oranges、Watermelon、Peaches )が各折れ線グラフのデータに相当する 6 個分のデータになります。
そして各行( 2003、2004、2005 )は 2 データごとのセルになってるかと思いますが、これがグラフでいうところの一番下に表示されてるように配置されます。 たとえば、各行を飛び石で作るのではなく、2003/1、2003/12、2004/1、2004/12、2005/1、2005/12 というように 6 データ分セルに追加した場合には、そのままグラフの下の位置に表示されることになります。

こんなかんじのテーブルを作っておけば、あとは JavaScript の方で勝手に読込んでグラフ化してくれちゃいます (￣∇￣)b

Bluff grafical library のカンタンな説明

上記サンプルのコードを以下に記します。

Bluff コード

  1. <div class="canvas"><canvas id="graph"></canvas></div>
  2.  
  3. <script type="text/javascript">
  4.     /*
  5.      * 1. Bluff オブジェクト生成(必須)
  6.      */
  7.     var g = new Bluff.Line('graph'/*canvas ID*/, 350/*横幅*/);
  8.     /*
  9.      * 2. ビルトイン・テーマ選択(オプション)
  10.      * g.theme_keynote();
  11.      * g.theme_37signals();
  12.      * g.theme_rails_keynote();
  13.      * g.theme_pastel();
  14.      * g.theme_odeo();
  15.      * g.theme_greyscale();
  16.      */
  17.     g.theme_odeo();
  18.     /*
  19.      * 3. 読込むテーブル ID セット(必須)
  20.      */
  21.     g.data_from_table('data'/*table ID*/);
  22.     /*
  23.      * 4. デザイン(オプション)
  24.      */
  25.     g.set_theme({
  26.         /* 折れ線グラフの色指定かと思ったら違った(もしかして不具合!?)
  27.         colors: ['#202020', 'white',
  28.                  '#a21764', '#8ab438',
  29.                  '#999999', '#3a5b87', 'black'],
  30.         */
  31.         marker_color: '#95949a',/*横のラインの色*/
  32.         font_color: '#330033',/*フォントの色*/
  33.         background_colors: ['#dcd6d9', '#a89dac']/*背景色(２色グラデーション)*/
  34.     });
  35.     /*
  36.      * 5. 最後に描画(必須)
  37.      */
  38.     g.draw();
  39. </script>

カンタンにコメント手順を記してますが、必須というコメントがあるとこは必ず必要になります。
オプションというコメントのところは配色などのデザインに関連するとこなのであってもなくっても問題ないです。

青字のところに実際に CANVAS によるグラフが描画されます。
赤字の部分には CANVAS の ID を指定して、緑字の部分は CANVAS の横幅になります。
ピンク字のところには、読込みたいテーブルの ID を指定します。
最後に黄色字でズバァーーーーーッ!! と描画になります。

オプションに関しては上記コメントを参考にして頂けたらと思います。

使い方

  1. Bluff: Beautiful graphs in JavaScript からライブラリをダウンロードします。 そしてサーバにアップロードしてください。アップロード先はどこでも構いません。各自の環境に合わせてアップロードしてください。

  2. HTML ヘッダに以下のコードを追加します。

    HTML ヘッダ

    1. <script type="text/javascript" src="http://●●●/js-class.js"></script>
    2. <script type="text/javascript" src="http://●●●/bluff-min.js"></script>
    3. <script type="text/javascript" src="http://●●●/excanvas.js"></script>

    青字の部分を先ほどアップロードした場所に変更します。

  3. データ元となるテーブルを作成します。
    先ほど説明したようなテーブル構造のデータを作成します。

  4. 最後に Bluff のスクリプトをテーブルの直下に辺りに貼り付けます。

以上です。
いろいろオプションもありますので合わせて参考にしてください。

CANVAS を使ったライブラリとして、だいぶ前に youmos さんとこで CSS と CANVAS を使った UI ライブラリってのをご紹介されてました。

用途は違うけど、まぁ同じ CANVAS つながりってことで (;￣∇￣A はは

 Trackback Pings(0)

No trackbacks found.

 Comments(0)

No comments found.

 Post a Comment

 

コメント用フィード