zz log

zaininnari Blog

テーブルからグラフを生成するグラフ描画ライブラリ「Bluff」を改造する

■公式
Bluff: Beautiful graphs in JavaScript

■紹介記事
MOONGIFT: » 要チェック!テーブルからグラフを生成するJavaScriptライブラリ「Bluff」:オープンソースを毎日紹介

MOONGIFT: » 要チェック!テーブルからグラフを生成するJavaScriptライブラリ「Bluff」:オープンソースを毎日紹介より引用:


そして面白いのはdata_from_tableというメソッドだ。これはHTMLタグのテーブルで描かれているデータを指定することで、グラフのプロットを行う機能だ。これを使えばグラフ生成とテーブル表示と二回に分けてデータを作成する必要もない。

表の条件として、一行目と一列目がグラフの項目として、処理・取得されるが、
2列目/2行目以降は、数字形式でない限り、処理・取得されない。
2列目/2行目以降を自動的に解析していくのはよいが、グラフにしたくない行列がある場合には、除外する手段がないので追加する。

具体的には、「class="nograph"」のあるセルを解析しないようにする。

bluff-src.js内

      case 'TD':
        if (!this._has_data) this._col_offset = this._col;
        this._col += 1;
        content = parseFloat(content.match(this.NUMBER_FORMAT)[0]);
        if (typeof content == 'number') {
          this._has_data = true;
          x = this._col - this._col_offset - 1;
          y = this._row - this._row_offset - 1;
          this.get_series(x).points[y] = parseFloat(content);
        }
        break;
      
      case 'TH':
        this._col += 1;
        if (this._col == 1 && this._row == 1)
          this._row_headings[0] = this._col_headings[0] = content;
        else if (node.scope == "row" || this._col == 1)
          this._row_headings[this._row - 1] = content;
        else
          this._col_headings[this._col - 1] = content;
        break;

を以下のように変更する。

      case 'TD':
        if (!this._has_data) this._col_offset = this._col;
        this._col += 1;
        content = parseFloat(content.match(this.NUMBER_FORMAT)[0]);
        if (typeof content == 'number' && node.className != 'nograpf') {
          this._has_data = true;
          x = this._col - this._col_offset - 1;
          y = this._row - this._row_offset - 1;
          this.get_series(x).points[y] = parseFloat(content);
        }
        break;
      
      case 'TH':
        this._col += 1;
        if (this._col == 1 && this._row == 1 && node.className != 'nograpf'){
          this._row_headings[0] = this._col_headings[0] = content;
        }else if ((node.scope == "row" || this._col == 1 ) && node.className != 'nograpf'){
          this._row_headings[this._row - 1] = content;
        }else if (node.className != 'nograpf'){
          this._col_headings[this._col - 1] = content;
        }
        break;

今のところ、これで問題はなさげ。

広告を非表示にする