テーブルからグラフを生成するグラフ描画ライブラリ「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;
今のところ、これで問題はなさげ。