html5 レーダーチャート

質問

html5を利用し、レーダーチャートを描く勉強をしています。

以下のサイトを参考にしています。
http://www.html5.jp/library/graph_radar.html

paramsの中の文字（安さ、性能、デザイン・・・）をURLを挿入して表示させたいと思っています。
（例えばレーダーチャートを描写し、安さをクリックすると安さのページへリンクする。）

URLを挿入する方法はありますでしょうか？
方法が分かる方がいらっしゃいましたら、教えて頂けますでしょうか？

回答No.6

fujillin · ベストアンサー

なんだか、直前の回答しか記憶に残っていないような…
これまでの回答を順に再度ご覧になることをお勧めします。

とりあえず、こんなのでは？（全角空白は半角に）

//要素の位置の特定
　var div = document.getElementById("sample").parentNode.childNodes;
　var flag = false;
　for(var i=0; i<div.length; i++){
　　var txt = div[i].textContent || div[i].innerText;
　　if(txt == params.aCap[0]){
　　　flag = true;
　　　for(var j=1; j<params.aCap.length; j++){
　　　　if(div[i+j]){
　　　　　txt = div[i+j].textContent || div[i+j].innerText;
　　　　　if(txt != params.aCap[j]){
　　　　　　flag = false;
　　　　　　break;
　　　　　}
　　　　}
　　　　else flag = false;
　　　}
　　　if(flag) break;
　　}
　}

//リンク要素を追加
　if(flag){
　　for(j=0; j<params.aCap.length; j++){
　　　var d = div[i+j];
　　　txt = d.textContent || d.innerText;
　　　var a = document.createElement("a");
　　　a.href = "hoge";
　　　while(d.firstChild) d.removeChild(d.firstChild);
　　　a.appendChild(document.createTextNode(txt));
　　　d.appendChild(a);
　　}
　}

お礼

たびたびご返信ありがとうございます。
無事にできました。
いろいろ勉強させて頂きましてありがとうございます。
また、何かありましたらよろしくお願い致します。

回答No.5

fujillin

#4です。

＞上記のソースをどのように修正すると～～
ありゃ。　金曜日に、試しに作成していたデータを削除してしまいました。すみません。

要は、
　rc.draw(items, params);
実行後は、チャートが作成されていますから、そこからデータを取り出して修正すればよろしいということです。
取り出す方法は、#2みたいな方法で。（もう少し確実な方が良いと思いますが）

入替えるのは、対象要素が変数divに取得できているとして、
　　var a = document.createElement("a");
　　var txt = div.textContent || div.innerText;
　　while(div.firstChild) div.removeChild(div.firstChild);
　　a.appendChild(document.createTextNode(txt));
　　a.href = "hoge";
　　div.appendChild(a);
みたいな感じでできるかと思います。

お礼

ご回答ありがとうございます。

以下の通り修正致しましたが、解決できませんでした。　どこか間違っておりますでしょうか？
再度助言を頂けますと幸いです。

/************************************************/
<script type="text/javascript">
window.onload = function(evt) {
var rc = new html5jp.graph.radar("sample");
if( ! rc ) { return; }
var items = [

["商品A", 5, 4, 2, 1, 2],
["商品B", 6, 5, 4, 2, 3],
["商品C", 3, 4, 3, 3, 3]
];
var params = { aCap: ["安さ", "安心", "快適"] }

rc.draw(items, params);

　　var div = document.getElementById("sample").parentNode.innerHTML;
var a = document.createElement("a");

var txt = div.textContent || div.innerText;

　　while(div.firstChild) div.removeChild(div.firstChild);
　　　 a.appendChild(document.createTextNode(txt));
　　 a.href = "radar.html";
　　　 div.appendChild(a);

};
/***************************************************************/

回答No.4

fujillin

#3です。

＞もう少しヒントを頂けますと幸いです

該当するキャプションや目盛や凡例は外側のdiv要素の子として
<div style="font-size: 12px; font-family: Arial,sans-serif; color: rgb(0, 0, 0); margin: 0pt; padding: 0pt; position: absolute; left: 125px; top: 22px;">安さ</div>
のような形で生成されるようです。
ただし、みな並列で記述されるので、実際のところ区別がつきません。
できるだけ正確にやるなら、文字列の並び部分が全てマッチするところを探すのがよろしいかと思います。

とりあえず、このdivが特定できれば
　<div>text</div>
を
　<div><a>text</a></div>
に変えてあげればよいということになります。

createElement()などできちんと生成して入替えてあげる方法が正道なんでしょうけれど…
（一番の正道はjsを解読して、きちんと修正することかな？）

　elment.innerHTML = '<a href="' + リンク先 + '">' + element.innerHTML + '</a>';
みたいな方法でも、この場合は可能かと思います。（まぁ、要領としてはこんな感じ）
（文字列の中で<や>をそのまま記述するのもあまりよろしくないようなので、\u003Cなどを用いるほうが良いかも。）

お礼

何度もご親切にご連絡ありがとうございます。　

onloadの中で処理ということは、以下のソースに手を加えると思い
いろいろためしてみたのですが、解決することができませんでした。

/*****************************************************************/
<script type="text/javascript">
window.onload = function() {
var rc = new html5jp.graph.radar("sample");
if( ! rc ) { return; }
var items = [
["商品A", 5, 2, 4, 5, 3, 2, 4, 4],
["商品B", 3, 4, 3, 4, 5, 4, 5, 1]
];
var params = {
aCap: ["安さ", "性能", "デザイン", "人気", "使いやすさ", "寿命", "軽さ", "強さ"]
}
rc.draw(items, params);
};
</script>
/************************************************************/

大変恐縮ですが、上記のソースをどのように修正するとリンク先を付けられますでしょうか？

以上、よろしくお願い致します。

回答No.3

fujillin

#2です。

＞マウスオンした際にtextとして判断されてしまいlink要素があるのか
＞ユーザからは判断が難しい状態です
#2の内容は、link要素を設定しているわけではなく、一例として、クリックイベントから要素を特定する例を示したものです。

＞カーソルをhandにするようにしたいのですが～
要素のスタイルで、cursor="pointer" を設定することでも可能ですが、スクリプトで行なうのであれば、通常のリンクを設定してしまった方がよろしいかと思います。
当該キャプション部分は<div>text</div>の構成で生成されるみたいですから、<div><a>text</a></div>となるようにonloadの中で処理してしまえば、自動的にカーソルも変化するようになるはずです。

お礼

ご返信ありがとうございます。

大変申し訳御座いませんが、いろいろ頑張ってみましたが、解決方法がわかりませんでした。
もう少しヒントを頂けますと幸いです。

補足

補足ですが、
要素のスタイルで、cursor="pointer"　を設定し処理する方法はできました。

onloadの方の処理を教えて頂けますでしょうか？

回答No.2

fujillin

ご提示のjsを解読するのは大変そうなので、中身を見ずにまったく別なアプローチを…

ごく単純にテキストを比較しているだけなので同じ文言が複数あると正しく判定できません。
お勉強中とのことなので、正確に判定できるようにしたりlink要素を組み込んだりの修正はお任せします。

とりあえず、どれがクリックされたかを判定する一例として。
（どうやら、チャートの文字はcanvas内には記述されていないようです）

（全角空白は半角に）
document./*@cc_on@if(1)attachEvent("on"+@else@*/
　addEventListener(/*@end@*/"click", function(evt){

　　var t = evt.target || evt.srcElement;
　　var p = document.getElementById("sample").parentNode;
　　if(t.nodeName != "DIV" || t.parentNode != p) return;

　　var txt = t.textContent || t.innerText;
　　var acap = ["安さ","性能","デザイン","人気","使いやすさ","寿命","軽さ","強さ"];
　　var i, flag = false, n = acap.length;

　　for(i=0; i<n; i++)
　　　if(acap[i] == txt){ flag = true; break; }

　　if(flag) alert("clickしたのは「" + txt + "」で、acap[ " + i + " ]です");

}, false);

補足

ご回答誠にありがとうございました。
以下の通り、修正致しました。

/**********************************************************************************/
＜省略＞
　　var acap = ["安さ","性能","デザイン","人気","使いやすさ","寿命","軽さ","強さ"];
　　var i, flag = false, n = acap.length;

　　for(i=0; i<n; i++)
　　　if(acap[i] == txt){ flag = true; break; }

　 if(flag) {
　 location.href = "http://www.yahoo.co.jp?val=" + txt;
　 //alert("clickしたのは「" + txt + "」で、acap[ " + i + " ]です");
}
}, false);

/* *************************************************************/

リンクを挿入することが無事にできました。ありがとうございます。
また、上記のままですとマウスオンした際にtextとして判断されてしまいlink要素があるのかユーザからは判断が難しい状態です。
解決方法としてカーソルをhandにするようにしたいのですが、可能でしょうか？

何度も恐縮ですが、助言を頂けると幸いです。