JqCloud(自定义/给定颜色的单词)

JqCloud (words with Custom/Given color)

本文关键字：颜色 单词 自定义 JqCloud      更新时间：2023-09-26

我正在使用JqCloud创建Word Cloud，
它工作良好，并给出预期的结果。
我的问题是我想给文本颜色，这是由用户提供的。

My Code is Like 

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"}  
];

这是你的解决方案…

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);
<标题>演示:http://jsfiddle.net/soundar24/1874zvdk/

来晚了一点…

几个月前我向jQCloud添加了这个特性，并请求合并。

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

https://github.com/mistic100/jQCloud

您在问题中提供的数据集将工作，但"颜色"需要小写，像这样:

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。获取最新的代码

相关文章：