关闭

JS实现云标签

202人阅读 评论(0) 收藏 举报
废话少说 直接上图
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/#



JS实现云标签
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:25469次
    • 积分:611
    • 等级:
    • 排名:千里之外
    • 原创:76篇
    • 转载:8篇
    • 译文:0篇
    • 评论:0条
    文章分类