news 2026/6/20 6:51:17

Highcharts词云图表开发文档

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
Highcharts词云图表开发文档

词云图

词云是一种可视化一组单词的方式,其中单词的大小和位置由其权重决定。

点击 这里 here 查看代码

需求

词云图表需要以下模块:modules/wordcloud.js.

选项

点击 这里 here 查看所有可用的词云系列选项的概述。

数据结构

每个词云系列中的点都必须包含一个 name 和一个 weight。 名称决定了在可视化中显示的文本内容,而权重 决定了其优先级。优先级最高的点会先被绘制, 并且字体会更大。

data:[{name:'Lorem',weight:3},{name:'Ipsum',weight:2},{name:'Dolor',weight:1}]

高级用法

自定义螺旋算法

螺旋用于在单词与其他单词碰撞或边界发生碰撞后,将单词移动到初始位置之外。 若要实现自定义螺旋,可以参考 archimedeanSpiral 函数,例如:

/** * archimedeanSpiral - Gives a set of coordinates for an Archimedian Spiral. * * @param {number} t How far along the spiral we have traversed. * @return {object} Resulting coordinates, x and y. */vararchimedeanSpiral=functionarchimedeanSpiral(t){t*=0.1;return{x:t*Math.cos(t),y:t*Math.sin(t)};};

螺旋算法通过将其附加到 spirals 属性上实现了访问:

Highcharts.seriesTypes.wordcloud.prototype.spirals.archimedean=archimedeanSpiral;

之后,你可以通过指定选项series<wordcloud>.spiral来使用该算法:

Highcharts.chart(...,{series:[{type:'wordcloud',spiral:'archimedean'}]});

自定义布局策略

策略用于决定单词的旋转角度和初始位置。 若要实现自定义策略,可以参考 randomPlacement 函数,例如:

varrandomPlacement=functionrandomPlacement(point,options){varfield=options.field,r=options.rotation;return{x:getRandomPosition(field.width)-(field.width/2),y:getRandomPosition(field.height)-(field.height/2),rotation:getRotation(r.orientations,r.from,r.to)};};

放置算法通过将其附加到placementStrategy属性上实现了访问:property:

Highcharts.seriesTypes.wordcloud.prototype.placementStrategy.random=randomPlacement;

之后你可以通过指定选项series<wordcloud>.placementStrategy来使用该算法:

Highcharts.chart(...,{series:[{type:'wordcloud',placementStrategy:'random'}]});

自定义字体大小

字体的大小由函数deriveFont计算得出,该函数根据单词的相对权重来确定结果。权重的范围是0到1,表示该单词相对于最大权重单词的大小。当自定义字体大小时,应注意,较大的字体可能会导致布局算法运行变慢,而较小的字体则可能使单词的排布更加分散。

// Include this snippet after loading Highcharts and before Highcharts.chart is executed.Highcharts.seriesTypes.wordcloud.prototype.deriveFontSize=function(relativeWeight){varmaxFontSize=25;// Will return a fontSize between 0px and 25px.returnMath.floor(maxFontSize*relativeWeight);};

需要注意的事项

  • 当单词以非90度倍数的角度旋转时,它们之间会有很多空隙。
    • 当前的碰撞算法没有考虑旋转,只会检查两个单词的外部区域是否碰撞。为了解决这个问题,我们可以利用 分离轴定理 Separating Axis Theorem
  • 当我导出我的图表时,单词的位置发生了变化。
    • 出时会重新渲染数据,这会导致单词在不同的坐标位置,而不是原始图表中的位置。
  • 出时会重新渲染数据,这会导致单词在不同的坐标位置,而不是原始图表中的位置。
    • 当前我们在词云系列中使用的默认字体没有安装在导出服务器上。
版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/15 16:28:31

GLM-4-9B-Chat-1M功能全解析:26种语言支持

GLM-4-9B-Chat-1M功能全解析&#xff1a;26种语言支持 1. 引言&#xff1a;为什么你需要关注这个模型 如果你正在寻找一个既能处理超长文档&#xff0c;又支持多语言对话&#xff0c;还能在普通显卡上运行的AI模型&#xff0c;那么GLM-4-9B-Chat-1M值得你深入了解。 这个模型…

作者头像 李华
网站建设 2026/6/18 17:20:03

Web 性能优化:如何让你的网站加载速度提升 50%

Web 性能优化&#xff1a;如何让你的网站加载速度提升 50%&#xff08;2026 实用指南&#xff09; 网站加载速度直接影响跳出率、转化率、SEO 排名和用户体验。Google 研究显示&#xff0c;加载时间从 1s 增加到 3s&#xff0c;跳出率可能增加 32%&#xff1b;从 1s 到 5s&…

作者头像 李华
网站建设 2026/6/17 13:22:10

Claude提示词工程 05,告别AI幻觉:让Claude诚实回应的提示词技巧

用过Claude的朋友&#xff0c;大概率都遇到过这样的尴尬&#xff1a;满心期待它给出精准答案&#xff0c;结果收到的却是看似专业、实则无凭无据的“编造内容”——可能是不存在的文献引用&#xff0c;可能是偏离事实的数据&#xff0c;也可能是逻辑自洽却完全错误的推导。这种…

作者头像 李华
网站建设 2026/5/31 0:49:30

BCI标签使用的核心规范与“红线”

“BCI良好棉花”标签是用于标识产品中含有通过良好棉花倡议&#xff08;Better Cotton Initiative, BCI&#xff09;认证的棉花的官方标识&#xff0c;旨在向消费者和企业传递该产品在棉花来源上符合可持续发展标准。该标签不仅是环保与社会责任的象征&#xff0c;也代表着供应…

作者头像 李华