【问题标题】:JqCloud (words with Custom/Given color)JqCloud(带有自定义/给定颜色的单词)
【发布时间】:2015-09-03 07:47:33
【问题描述】:

我正在使用 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"}  
];

【问题讨论】:

    标签: javascript jquery tag-cloud word-cloud


    【解决方案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);
    

    演示:http://jsfiddle.net/soundar24/1874zvdk/

    【讨论】:

      【解决方案2】:

      聚会有点晚了……

      几个月前我将此功能添加到 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。只需获取最新的代码。

      【讨论】:

      • 谢谢你,如果需要,我们会检查并更新我们现有的代码。
      猜你喜欢
      • 2021-10-13
      • 1970-01-01
      • 2020-11-27
      • 1970-01-01
      • 2020-08-18
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-07-13
      相关资源
      最近更新 更多