js 静态标签云

// 假设我们已经有了一个词频对象 wordFreq
const wordFreq = { 'JavaScript': 10, '标签云': 8, '静态': 6, ... };

// 设置最大和最小字体大小
const minFontSize = 12;
const maxFontSize = 36;

// 创建一个div元素来容纳标签云
const cloudDiv = document.createElement('div');
cloudDiv.style.position = 'relative';
cloudDiv.style.width = '600px';
cloudDiv.style.height = '400px';

// 计算每个词的字体大小
for (const [word, freq] of Object.entries(wordFreq)) {
  const fontSize = minFontSize + (maxFontSize - minFontSize) * (freq / Math.max(...Object.values(wordFreq)));
  const span = document.createElement('span');
  span.innerText = word;
  span.style.fontSize = `${fontSize}px`;
  span.style.position = 'absolute';
  // 这里可以添加更多的样式，如颜色、字体等
  cloudDiv.appendChild(span);
}

// 将标签云添加到页面上
document.body.appendChild(cloudDiv);

// 注意：这只是一个简单的示例，实际的标签云生成可能需要更复杂的布局算法来避免词语重叠。