JS实现云标签

废话少说 直接上图

效果如图，其中字体最大的表示出现次数最多，

实现很简单只需引入  wordcloud2.js

然后定义一个画布，这里id为“canvas”

宽度大小根据情况而定。

然后是定义option选项，这个是这个样式的关键，当然你可以根据你的喜欢设置你喜欢的样式，

var option={

  list:data,

  gridSize: Math.round(16 * $('#canvas').width() / 1024),

  weightFactor: function (size) {

    return Math.pow(size, 2.3) * $('#canvas').width() / 1024;

  },

  minRotation: 1.58,

  maxRotation: 1.58,

  rotateRatio: 0.3,

  color: function(){

    return ['blue','rgb(95, 95, 253)','rgb(146, 146, 255)','rgb(169, 169, 226)','rgb(168, 217, 252)'][Math.floor(Math.random()*5)]},

  fontFamily: '微软雅黑',

  backgroundColor: '#fff'

}

注意，option中的第一个参数list的值data的格式如下：[["key",5],["测试"，4],...]

数值4,5将会影响字体显示大小，建议最好不要超过10，不然会特别大

然后最后一步调用便成功了：

WordCloud(elements, option);

elements 是画布DOM，你可以写成document.getElementByIdx_x('my_canvas')，或者用jquery也是支持的，option则是上面定义的option，就是全部了，

最后给大家提供JS下载的地址：http://timdream.org/wordcloud2.js/#