html5を利用し、レーダーチャートを描く勉強をしています。
以下のサイトを参考にしています。
http://www.html5.jp/library/graph_radar.html
paramsの中の文字(安さ、性能、デザイン・・・)をURLを挿入して表示させたいと思っています。
(例えばレーダーチャートを描写し、安さをクリックすると安さのページへリンクする。)
URLを挿入する方法はありますでしょうか?
方法が分かる方がいらっしゃいましたら、教えて頂けますでしょうか?
No.6ベストアンサー
- 回答日時:
なんだか、直前の回答しか記憶に残っていないような…
これまでの回答を順に再度ご覧になることをお勧めします。
とりあえず、こんなのでは?(全角空白は半角に)
//要素の位置の特定
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
- 回答日時:
#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
- 回答日時:
#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
- 回答日時:
#2です。
>マウスオンした際にtextとして判断されてしまいlink要素があるのか
>ユーザからは判断が難しい状態です
#2の内容は、link要素を設定しているわけではなく、一例として、クリックイベントから要素を特定する例を示したものです。
>カーソルをhandにするようにしたいのですが~
要素のスタイルで、cursor="pointer" を設定することでも可能ですが、スクリプトで行なうのであれば、通常のリンクを設定してしまった方がよろしいかと思います。
当該キャプション部分は<div>text</div>の構成で生成されるみたいですから、<div><a>text</a></div>となるようにonloadの中で処理してしまえば、自動的にカーソルも変化するようになるはずです。
この回答への補足
補足ですが、
要素のスタイルで、cursor="pointer" を設定し処理する方法はできました。
onloadの方の処理を教えて頂けますでしょうか?
ご返信ありがとうございます。
大変申し訳御座いませんが、いろいろ頑張ってみましたが、解決方法がわかりませんでした。
もう少しヒントを頂けますと幸いです。
No.2
- 回答日時:
ご提示の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にするようにしたいのですが、可能でしょうか?
何度も恐縮ですが、助言を頂けると幸いです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<a>タグのテキストを取得
-
重複しないくじの作り方がわか...
-
JavaScriptのメモ帳アプリ編集...
-
タブ画像を切り替えてクッキー保存
-
リンクを新しい窓で開きたい
-
ホームページ内でのRSS表示の方法
-
jsファイルを使用して計算した...
-
配列の大括弧と丸括弧はどう違う?
-
クリックを押した時にリンク先...
-
関数でy=g(x)のgとは何の略です...
-
複数ファイルで使うグローバル...
-
ジェネレーターの作り方
-
Linux バイナリ実行できない "...
-
C#で、ContextMenuStripに動的...
-
gas スプレッドシートがアクテ...
-
ローカルにあるファイルを検索...
-
functionから別のfunctionを実...
-
同じIDで定義した要素の配列を...
-
idを使わずにonclickで自身の要...
-
ぷよぷよの消去アルゴリズムが...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ActiveXobjectが作成できない
-
<a>タグのテキストを取得
-
重複しないくじの作り方がわか...
-
任意の座標をクリックさせるには
-
javascriptでCSVを呼出しvlookup
-
innerHTML実行後のイベント
-
HTML:Tableタグに対し、JavaScr...
-
onchangeイベントを使ってspan...
-
WordPressのコンタクトフォーム...
-
appendChildがieだとできない??
-
配列の大括弧と丸括弧はどう違う?
-
JavaScriptでオブジェクトを取...
-
【Tabキー】特定の範囲内だけで...
-
div要素内の全input要素をdisable
-
問題はbind の付いたリスナーを...
-
モーダルダイアログウィンドウ...
-
テキストボックスがブランクの...
-
javascript 特定のタグのidの存...
-
日本語入力の禁止
-
javascriptで編集可能不可能の...
おすすめ情報