JS实现云标签

原创 2016年05月31日 14:21:33
废话少说 直接上图
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自写带描述标签云

这个版本是随机排序,原理是随机颜色、随机字号,首尾三行逐行缩进形成椭圆形构造。效果预览:HTML部分: ...
  • dlming614
  • dlming614
  • 2015年10月12日 15:56
  • 1196

纯JS实现的3D标签云,不依赖任何第三方库,支持移动页面

纯JS实现的3D标签云,不依赖任何第三方库,支持移动页面
  • kittyjie
  • kittyjie
  • 2014年07月17日 13:05
  • 3341

jquery实现原理

jQuery的开篇声明里有一段非常重要的话:jQuery是为了改变javascript的编码方式而设计的. 从这段话可以看出jQuery本身并不是UI组件库或其他的一般AJAX类库. jQuery改变...
  • yongxiaokang1
  • yongxiaokang1
  • 2014年12月17日 13:56
  • 981

JS 实现2+2=5的代码 实现原理解析

用一小段代码实现2+2=5.其原理解析。
  • NCScan
  • NCScan
  • 2014年06月10日 15:48
  • 874

JS自写带描述标签云

这个版本是随机排序,原理是随机颜色、随机字号,首尾三行逐行缩进形成椭圆形构造。效果预览:HTML部分: ...
  • dlming614
  • dlming614
  • 2015年10月12日 15:56
  • 1196

更改Yelee主题标签云为球形标签云

首先介绍球形标签云官方js插件地址:http://www.goat1000.com/tagcanvas.php 里面包含了详细说明,看例子应该很容易明白,利用html5的Canvas绘图。这里我使用...
  • u011026329
  • u011026329
  • 2016年10月26日 22:57
  • 291

Angularjs标签模板加载原理

前言 Angularjs提供多种模板加载方案。 最基础的为通过预先声明路径的方式,通过Ajax获取。使用诸如gulp-html2js构建工具,将HTML模板转化为js文件使用。使用scri...
  • yczz
  • yczz
  • 2015年09月09日 15:37
  • 3848

js继承的实现

js继承有5种实现方式:  1、继承第一种方式:对象冒充    function Parent(username){      this.username = username;      t...
  • z69183787
  • z69183787
  • 2015年02月16日 16:52
  • 635

基于HTML5 SVG可互动的3D标签云jQuery插件

svg3dtagcloud.js是一款基于HTML5 SVG的3D标签云jQuery插件。该3D标签云插件不需要额外的CSS样式,可使用鼠标与标签进行互动,并提供很多参数来控制标签云的外观。 效果演示...
  • z960339491
  • z960339491
  • 2017年04月26日 11:29
  • 898

wordcloud----canvas 绘制标签云/词云web版wordle(一)

大家来看这篇文章,想必都了解过wordle。
  • Nicolecc
  • Nicolecc
  • 2014年11月11日 14:52
  • 3073
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JS实现云标签
举报原因:
原因补充:

(最多只允许输入30个字)