Javascript

jQuery Visualizeでグラフを描画ができるらしいのでちょっといじってみた

Posted on 2012年5月21日 by me

テーブルからグラフができるなんて。

jQuery Visualizeはcanvasを利用してグラフを描画するjQuerynのプラグインのようです。
googleのexcanvasも同梱されているようなのでIEでも対応可能。
なんと言ってもテーブルからグラフが作れるということが他のグラフ描画ライブラリとは違うところかなと思う。

詳しい使い方は以下で
Update to jQuery Visualize: Accessible Charts with HTML5 from Designing with Progressive Enhancement
ソースのダウンロードはこちら

で、今回は、もうちょっと使い勝手をよくするために、既存の機能を以下のようにちょっと拡張してみた。

  • twitter bootstrapとの連携
  • グラフの強調表示

twitter bootstrapとの連携

twitter bootstrapにそのまま組み込むと、スタイルがバッティングしているところがあるので、そこを調整してみる

1.visualize.jQuery.jsで指定されているクラスの変更

現状のものだと、spanにかかっているlabelクラスがバッティングしてしまうので、visualize.jQuery.jsのspanにlabelクラスを当てているところをリネームする。(ここでは仮にpoint-labelとする)

label
.css('margin-top', topOffset)
.addClass('label');

↓

label
.css('margin-top', topOffset)
.addClass('point-label');

2.visualize-bootstrap.cssを作成

visualize-light.cssを元に、visualize-bootstrap.cssを作成し、span.labelのところをspan.point-labelに変更

これでbootstrapに組み込んでも、スタイルが崩れないようになった。

グラグの強調表示

せっかくテーブルからグラフが作れるので、クリックした行と連動して、対象の行を強調するような再描画をかける

1.visualize.jQuery.jsの設定追加

今回の内容を実現するのに、「非アクティブ時のグラグの色」と「アクティブな行番号」をプラグイン側に持たせる必要があるので、設定を以下を追加

emphasis: null
deactivateColor : "#aaaaaa"

2.テーブルをスクレイピングする処理に、強調表示の処理を追加

テーブルのスクレイピングは、scrapeTable()で行っているので、そこに強調したい行が存在する場合の処理を追加する。

scrapeTable直下に以下を追加

var activeLine = null;
if(o.emphasis != null) {
activeLine = o.emphasis;
}

tableData.dataGroupsに以下を追加

if (activeLine != null) {
if (activeLine == (i + 1)) {
dataGroups[i].color = colors[i];
}
else {
dataGroups[i].color = o.deactivateColor;
}
}
else {
dataGroups[i].color = colors[i];
}

これでプラグイン側の修正は完了。

3.使ってみる

こんな感じで呼び出す。

$(function(){
var configLine = {type: 'line', width: '420px'};
var configPie  = {type: 'pie', height: '300px', width: '420px'};
var configBar  = {type: 'bar', width: '420px'};
var configArea = {type: 'area', width: '420px'};
var visualizeEvent = function(){
$("#graph-line").html($('table#visualize').visualize(configLine));
$("#graph-pie").html($('table#visualize').visualize(configPie));
$("#graph-bar").html($('table#visualize').visualize(configBar));
$("#graph-area").html($('table#visualize').visualize(configArea));
};
visualizeEvent();
$("tr.line").click(function(){
configLine.emphasis =  $("tr").index(this);
configPie.emphasis =  $("tr").index(this);
configBar.emphasis =  $("tr").index(this);
configArea.emphasis =  $("tr").index(this);
    visualizeEvent();
});
});


いけた。

以下でデモが見れます。
jQuery Visualizeを利用した、グラグの描画 – サンプルとか