2015-09-03 5 views
0

Я использую JqCloud для создания облака слов,
Он отлично работает и дает ожидаемый результат.
Моя проблема в том, что я хочу дать цвет текста, который предоставляется пользователем.JqCloud (слова с пользовательским/заданным цветом)

Мой кодекс Как

var words = [ 
    {text: "Lorem", weight: 13}, 
    {text: "Ipsum", weight: 10.5}, 
    {text: "Dolor", weight: 9.4} 
]; 

$('#demo').jQCloud(words, { 
    classPattern: null, 
    colors: ["#800026", "#bd0026", "#e31a1c", "#fc4e2a", "#fd8d3c", "#feb24c", "#fed976", "#ffeda0", "#ffffcc"], 
    fontSize: { 
    from: 0.1, 
    to: 0.02 
    } 
}); 

Приведенный выше код правопреемником цвет, но его зависит от приоритета,
Я хочу объявить цвет таким образом, чтобы затуманить генерации заданного цвета.

Есть ли способ, чтобы я мог установить цвет текста.

ex. Lorem - Red(#FF0000) 
Ipsum- Green(#006600) 
Dolor - Blue(#0000FF) 

Некоторые вещи, как и любой другой способ

var words = [ 
    {text: "Lorem", weight: 13,Color:"#FF0000"}, 
    {text: "Ipsum", weight: 10.5,Color:"#006600"}, 
    {text: "Dolor", weight: 9.4 ,Color:"#0000FF"} 
]; 

ответ

1

Вот решение для вас ...

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); 

DEMO: http://jsfiddle.net/soundar24/1874zvdk/

1

Немного опоздал на вечеринку ...

Я добавил эту функцию в jQCloud несколько месяцев назад и попросил слияния.

https://github.com/mistic100/jQCloud/pull/20

https://github.com/mistic100/jQCloud

Набор данных, которые вы предоставили в вашем вопросе будет работать, но "Color" должно быть в нижнем регистре, например:

var words = [ 
    {text: "Lorem", weight: 13, color:"#FF0000"}, 
    {text: "Ipsum", weight: 10.5, color:"#006600"}, 
    {text: "Dolor", weight: 9.4 , color:"#0000FF"} 
]; 

Нет необходимости цикла и изменять CSS каждого элемента в примере Soundar R. Просто возьмите последний код.

+0

Поблагодарите u, проверит и обновит наш существующий код, если потребуется. – Aamir

Смежные вопросы