jQCloud词云入门教程：word_array词对象与容器参数一次讲透

jQCloud词云入门教程word_array词对象与容器参数一次讲透【免费下载链接】jQCloudjQuery plugin for drawing neat word clouds that actually look like clouds项目地址: https://gitcode.com/gh_mirrors/jq/jQCloudjQCloud 是一款轻量级的 jQuery 词云插件它能用纯 HTML CSS 在网页中绘制出真正像云一样的词云word cloud与标签云——不画 canvas、不生成图片每个词都是可点击、可用 CSS 自由换色的文字。本教程面向新手用最小的代码量把 jQCloud 的两个核心概念一次讲透word_array 词对象数组和容器参数对象帮你在 10 分钟内画出第一个词云。jQCloud 是什么一个方法两大核心整个插件的核心 API 只有一个方法看懂它就看懂了 jQCloud$(#cloud).jQCloud(word_array, options);word_array词对象数组描述画哪些词、多大、要不要链接options容器参数对象描述云多宽多高、什么形状、怎么渲染下面分别拆解这两个参数。快速上手3 步绘制你的第一个词云第 1 步引入 3 个文件。先在页面中引入 jQuery再引入插件脚本和样式文件link relstylesheet hrefjqcloud.css / script srcjquery.min.js/script script srcjqcloud-1.0.4.js/script对应项目中的 jqcloud-1.0.4.js调试用与 jqcloud-1.0.4.min.js生产压缩版样式基线是 jqcloud.css。第 2 步准备一个显式指定尺寸的容器。div idcloud stylewidth: 550px; height: 350px;/div第 3 步组织词数组并调用方法。var word_array [ { text: 词云, weight: 10 }, { text: jQuery, weight: 6 }, { text: 入门, weight: 3 } ]; $(#cloud).jQCloud(word_array);打开页面一朵椭圆形的词云就出现在容器里了 完整可运行的写法见官方演示 examples/index.html。word_array 词对象详解2 个必填 4 个可选属性每个词对象就描述一个词。属性速查表如下属性必填类型作用text✅ 必填string词的文本内容weight✅ 必填number相对权重词频、重要性等决定字体大小html可选object该词span的 HTML 属性如title、classid由 jQCloud 自动分配不可覆盖link可选string / object把词包进a标签传字符串即href传对象可再配target等属性afterWordRender可选function该词渲染完成后的回调函数内this指向该词的spanhandlers可选object绑定事件如{ click: function() {...} }一个满配词对象长这样{ text: jQuery, weight: 8, html: { title: 悬停提示文字, class: highlight }, link: { href: #docs, target: _blank }, handlers: { click: function () { alert(点击了); } } }小贴士html.class会被识别为自定义类名单独处理不会覆盖 jQCloud 自动添加的权重类可以放心叠加自己的样式。weight 权重如何决定字体大小weight本身可以是任意范围的数字词频、点赞数都行jQCloud 会把它线性映射到 1~10 的整数等级最大词变成w10、最小词变成w1其余按占比插值。每个等级对应一个 CSS 类jqcloud.css 中定义了 10 档字号从w1的 100% 到w10的 550%和颜色你完全可以在自己的样式表里改写这 10 条规则来定制外观。渲染顺序也有讲究源码 jqcloud-1.0.4.js 会先按 weight 降序排序权重大的词从容器中心开始沿螺旋线寻找空位权重小的词填在外围——这正是词云中间大、四周小的经典观感来源。容器参数cloud options速查表第二个参数options控制整朵云全部可选默认值如下参数默认值说明width/height容器的原始宽高词云容器的宽、高像素不传则沿用容器自身尺寸center容器正中心云中心的坐标如{x: 300, y: 150}shape椭圆默认设为rectangular可画矩形词云delayedMode词数 50 时为 truetrue 时逐个词延迟渲染避免词多时页面卡死removeOverflowingtrue移出超出容器边界的词encodeURItrue对link地址做 URI 编码防引号等特殊字符出错afterCloudRender—整朵云渲染完毕后的回调函数内this指向容器一个典型用法$(#cloud).jQCloud(word_array, { width: 600, height: 400, shape: rectangular, delayedMode: false, afterCloudRender: function () { console.log(渲染完成); } });shape椭圆形 vs 矩形默认是椭圆螺旋布局半径和角度同时递增呈花瓣状扩散把shape设为rectangular后词会沿矩形螺旋放置铺满率更高适合需要填满 banner 的场景。官方演示 examples/rectangular.html 只多写了{shape: rectangular}一行效果差异一目了然。delayedMode为什么词多了要慢慢画每个词放置前都要与已放置的词逐一做重叠检测词一多计算量就上去了。delayedMode: true时插件每隔 10ms 画一个词把计算分摊到多个帧里浏览器就不会冻结——超过 50 个词时它会自动开启。词少时可手动设为 false 一步渲染完成。新手必避的 3 个容器陷阱⚠️ 调用jQCloud时容器踩坑是最常见的问题记住这三条容器必须可见且尺寸非零。调用时若容器被display: none隐藏或宽高为 0布局会失败延迟模式下会一直等待容器可见才继续。必须显式指定容器的宽高。没有width/height时默认值取不到词云可能消失。position 不能是 static。若容器定位是staticjQCloud 会强制改为relative词的绝对定位依赖它自己写 CSS 时最好直接声明好。满足这三点再配合removeOverflowing自动裁剪超出的词布局就稳了。官方示例与项目文件导航想多看效果直接打开这三个官方演示页examples/index.html经典椭圆词云含链接、悬停提示、自定义类名examples/rectangular.html矩形词云shape: rectangularexamples/vertical_words.html用html: {class: vertical} CSS 实现竖排文字词云其他常用文件插件源码开发版jqcloud/jqcloud-1.0.4.js默认样式w1~w10 字号与颜色基线jqcloud/jqcloud.css核心测试用例test/core_tests.js官方完整文档README.md源码模板构建用含版本占位src/jqcloud/jqcloud.js.erb总结掌握 jQCloud 只需记住两件事词对象数组定内容textweight必填html/link/afterWordRender/handlers增强交互容器参数定形态尺寸、形状、渲染节奏、溢出策略。词云本质是纯 HTML后续换字体、改配色、加动效全部交给 CSS 和 JS 处理——这正是 jQCloud 作为轻量级 jQuery 词云插件最灵活的地方 ✨【免费下载链接】jQCloudjQuery plugin for drawing neat word clouds that actually look like clouds项目地址: https://gitcode.com/gh_mirrors/jq/jQCloud创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考