我正在使用JqCloud创建Word Cloud,
它工作正常并给出预期的结果
我的问题是我想给用户提供的文字颜色。
我的代码就像
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"}
];
答案 0 :(得分:2)
以下是您的解决方案......
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);
答案 1 :(得分: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"}
];
无需在Soundar R的示例中循环和修改每个元素的CSS。只需抓住最新的代码。