改行機能付加 CANVAS レーダーチャート

javascriptベースでHTMLページに自由に描画の出来る技術としての CANVAS に驚きを禁じ得ないとしてご紹介したのが、当ブログ2008年6月19日のアーティクル描画に於けるjavascript技術CANVAS にて、当該技術の多くの情報を得られるとして紹介の、 HTML5.JP 中ライブラリの一つレーダーチャートの Apache License, Version 2.0 にて公開されるを実際落して使用して見た処、 HTML上ではjava アプレットや PHP の GD を使用したメソッドは見付かるものの、 javascript では其の実装がなかなか見付からず、諦めかけていた処ですので、此処まで確り作り込まるを拝見すれば、書籍何冊かで教えを受けた上、又更に当メソッドに依る恩恵を与えたくれた羽田野太巳氏には感謝に堪えません。

実際使用するにあたって、例えばクライアントの指定に従えば、レーダーチャートの項目は拘りから長くなることも多く、折り返しが必要になることがあれば、実際に当該機能追加してみたレーダーチャート表示が下にて、

上を実現すべく拙いコードを追加したのは、先ずはオリジナルソースに於ける443行目以下の

/* -------------------------
文字列を描画
* ------------------------ */
html5jp.graph.radar.prototype._drawText = function(x, y, text, font_size, font_family, color) { //mod
  var div = document.createElement('DIV');
  div.appendChild( document.createTextNode(text) ); //del
  div.style.fontSize = font_size;
  div.style.fontFamily = font_family;
  div.style.color = color;
  div.style.margin = "0";
  div.style.padding = "0";
  div.style.position = "absolute";
  div.style.left = x.toString() + "px"; //del
  div.style.top = y.toString() + "px";
  this.canvas.parentNode.appendChild(div);
}

について「 //del」行を削除し、「 //mod」行を変更、処理を追加すべく以下に変更し、

/* -------------------------
文字列を描画
* ------------------------ */
html5jp.graph.radar.prototype._drawText = function(x, y, text, font_size, font_family, color, ang_x) { //mod line
  var div = document.createElement('DIV');
/*---設定------------------ */
var br_str = "<br />"; //改行文字列
var br_size = 16; //改行サイズ
/*------------------------- */
var br_length = br_str.length;
if(text.indexOf(br_str,0) != -1){
  var br_str_pos = text.indexOf(br_str,0);
  var end_str_pos = text.length;
  var s = this._getTextBoxSize(text.substring(0,br_str_pos), font_size, font_family);
  center_x = this.canvas.height * 0.1 + Math.min(this.canvas.width, this.canvas.height) * 0.7 / 2;
  if(ang_x < center_x*1.1 && ang_x > center_x*0.9){
    br_shift = ang_x - s.w/2;
  }else if(ang_x > center_x){
    br_shift = ang_x;
  }else{
    if(  ang_x - s.w*1.1 < 3){
      br_shift = 3;
    }else{
      br_shift = ang_x - s.w;
    }
  }
  div.style.left = br_shift + "px";
  div.appendChild( document.createTextNode(text.substring(0,br_str_pos)) );
  if(text.substring(0,br_str_pos)){
    this._drawText(br_shift, y+br_size, text.substring(br_str_pos+br_length,end_str_pos), font_size, font_family, color, ang_x);
  }
}else{
  div.style.left = x.toString() + "px";
  div.appendChild( document.createTextNode(text) );
}
  div.style.fontSize = font_size;
  div.style.fontFamily = font_family;
  div.style.color = color;
  div.style.margin = "0";
  div.style.padding = "0";
  div.style.position = "absolute";
  div.style.top = y.toString() + "px";
  this.canvas.parentNode.appendChild(div);
}

と、此の部分のみの変更で他を弄ることなく目的の機能実装を果たしたかったのですが、能力足らずして、引数が増えていることでお判りの様に、コード内他部で _drawText 関数に引き渡す引数を追加している部分が 293行以下にて下の

var ang = axis_angles[i];
var ang_x = cpos.x + cpos.r * 1.15 * Math.cos(ang); //add
var x = cpos.x + cpos.r * 1.15 * Math.cos(ang) - s.w / 2;

で「 //add」行が新たに変数を追加した部分、又に302行目にて関数呼び出し部分、

/* テキストを描画 */
this._drawText(x, y, text, params.aCapFontSize, params.aCapFontFamily, params.aCapColor);

を

/* テキストを描画 */
this._drawText(x, y, text, params.aCapFontSize, params.aCapFontFamily, params.aCapColor, ang_x);

と変更すると云う塩梅で、実際ご覧いただけばまだまだ、目で見てバランスを考え乍文字数を調整する抔の手間が必要にて、また改行コードが繰り返されるのを想定し、再帰的に実装しているのですが、最終的な処理を施していない為、HTML 側にも項目名を改行する場合には、文字列の最後に任意改行コードを一つ余計に追加しなければならない仕様となって仕舞い、少なからぬ問題を含む上での公開は如何かご寛恕いただき度存知ます。