js实现云图
使用WordCloud库生成云图
WordCloud是一个流行的JavaScript库，用于生成词云。安装可以通过npm或直接引入CDN链接。
// 安装
npm install wordcloud<!-- CDN引入 -->
<script src="https://cdn.jsdelivr.net/npm/wordcloud@1.2.2/src/wordcloud2.min.js"></script>基本用法示例
创建一个简单的词云需要准备数据和配置选项。数据格式为二维数组，每个子数组包含词语和权重。
const words = [
['JavaScript', 30],
['Python', 25],
['Java', 20],
['C++', 15],
['Ruby', 10]
];
WordCloud(document.getElementById('wordcloud'), {
list: words,
gridSize: 10,
weightFactor: 5,
color: 'random-dark'
});自定义样式和形状
通过配置对象可以调整云图的形状、颜色和布局。shape参数支持圆形、心形等预设形状，或使用自定义图像。
WordCloud(document.getElementById('wordcloud'), {
list: words,
shape: 'circle',
backgroundColor: '#f0f0f0',
color: function () {
return '#' + Math.floor(Math.random() * 0xFFFFFF).toString(16);
}
});响应式设计处理
为了使云图适应不同屏幕尺寸，需要监听窗口变化事件并重新绘制。
function drawWordCloud() {
const width = window.innerWidth * 0.8;
const height = window.innerHeight * 0.6;
WordCloud(document.getElementById('wordcloud'), {
list: words,
gridSize: Math.round(width / 100),
weightFactor: Math.round(height / 50),
minSize: 8
});
}
window.addEventListener('resize', drawWordCloud);
drawWordCloud();从API获取动态数据
实际应用中常需要从后端API获取词频数据。以下示例展示如何使用fetch获取数据并更新云图。
async function loadWordCloud() {
try {
const response = await fetch('/api/word-frequency');
const data = await response.json();
WordCloud(document.getElementById('wordcloud'), {
list: data,
backgroundColor: '#fff',
rotateRatio: 0.5
});
} catch (error) {
console.error('数据加载失败:', error);
}
}注意事项
- 性能优化：大数据集时应适当调整gridSize和weightFactor参数
- 浏览器兼容性：某些配置在移动端可能需要特殊处理
- 交互功能：可通过添加click事件实现词语点击交互
document.getElementById('wordcloud').addEventListener('wordcloudclick', function(ev) {
console.log('点击词语:', ev.detail.text);
});
