자바스크립트 jqcloud 워드클라우드 예시2

<link rel="stylesheet" href="http://mistic100.github.io/jQCloud/dist/jqcloud2/dist/jqcloud.min.css">
<script src="http://mistic100.github.io/jQCloud/dist/jqcloud2/dist/jqcloud.js"></script>
    
<div id="demo" style="width: 550px; height: 350px; position: relative;"></div>

var words = [
    { text: "Lorem", weight: 13, color: "#FF0000" },
    { text: "Ipsum", weight: 10.5, color: "violet" },
    { text: "Dolor", weight: 9.4, color: "#0000FF" },
    { text: "Sit", weight: 8, color: "orange" },
    { text: "Amet", weight: 6.2, color: "#26FC32" },
    { text: "Consectetur", weight: 5, color: "#006600" },
    { text: "Adipiscing", weight: 5, color: "green" }
];

$("#demo").jQCloud(words);

setTimeout(function () {
    var obj = $("#demo").data("jqcloud");
    var data = obj.word_array;
    for (var i in data) {
        $("#" + data[i]["attr"]["id"]).css("color", data[i]["color"]);
    }
}, 100);

 

결과화면

출처

Edit fiddle - JSFiddle - Code Playground

 

 

for문으로 변경 !!

<div id="popularTop" style="width: 550px; height: 350px;"></div>
 
<script>

var words_list = new Array();
var wordsIn = "";

for ( var i = 0; i < popularWords.length; ++i ) {
    
wordsIn = popularWords[i];
    
words_list.push({
            text: wordsIn,
            weight: 10,
            link: 'javascript:relativeLinks();',
            color: "#FF0000"
    });
}

/* var words = [

{ text: popularWords[0], weight: 35, link: 'javascript:relativeLinks();', color: "#FF0000" }
    { text: "Ipsum", weight: 27, link: 'javascript:relativeLinks();', color: "violet" },
    { text: "Dolor", weight: 24, link: 'javascript:relativeLinks();', color: "#0000FF" },
    { text: "Sit", weight: 21, link: 'javascript:relativeLinks();', color: "orange" },
    { text: "Amet", weight: 18, link: 'javascript:relativeLinks();', color: "#26FC32" },
    { text: "Consectetur", weight: 15, link: 'javascript:relativeLinks();', color: "#006600" },
    { text: "Adipiscing", weight: 12, link: 'javascript:relativeLinks();', color: "green" },
    { text: "Amet", weight: 9, link: 'javascript:relativeLinks();', color: "#26FC32" },
    { text: "Consectetur", weight: 8, link: 'javascript:relativeLinks();', color: "#006600" },
    { text: "Adipiscing", weight: 7, link: 'javascript:relativeLinks();', color: "green" }
];  */

console.log(words_list);

$("#popularTop").jQCloud(words_list);

setTimeout(function () {
    var obj = $("#popularTop").data("jqcloud");
    var data = obj.word_array;
    for (var i in data) {
        $("#" + data[i]["attr"]["id"]).css("color", data[i]["color"]);
    }
}, 100);

function relativeLinks(){

alert("!!!!");
}

</script>

추가 옵션 참고사이트 : jQCloud (mistic100.github.io)

jQCloud