原创投稿
  1. 创想鸟首页
  2. 用户投稿

如何用纯HTML和JavaScript绘制一个自适应且可交互的鱼骨图？

程序猿 • • 用户投稿

用纯HTML和JavaScript绘制自适应交互式鱼骨图

本文介绍如何仅使用html和javascript创建类似鱼骨图的图表，无需依赖外部图形库如g6。 目标是创建一个多层级、自适应大小、并支持文本显示的鱼骨图，类似于示例图片所示的复杂图表。以下代码实现了大部分功能，并指出了可进一步优化的方向。

代码利用HTML5的SVG元素进行绘图，数据采用JSON格式存储，方便修改和扩展。 核心代码围绕一个名为fishbone的类，负责图表的绘制和布局。

如何用纯HTML和JavaScript绘制一个自适应且可交互的鱼骨图？

基本代码结构如下：

自适应鱼骨图
    // ... (完整的JavaScript代码，请参考原文或自行补充) ...    #svgBox {        height: 100vh;        width: 100vw;        background-color: antiquewhite;    }

代码首先定义SVG画布，然后fishbone类负责绘制。该类包含多个方法，例如main方法初始化和渲染；initkvarray计算节点宽度；randermonthbox绘制节点框；randerfirstcircle绘制一级子节点；creatbigcircle递归绘制后续层级；getlinewidth计算文本宽度；getmaxchildheight计算子集最大高度；createtag简化SVG元素创建；以及createmonth、renderparent和randerleaf分别绘制节点框、父节点和叶子节点。

Otter.ai Otter.ai

一个自动的会议记录和笔记工具，会议内容生成和实时转录

Otter.ai 91 查看详情 Otter.ai

立即学习“Java免费学习笔记（深入）”；

代码已实现节点宽度和文字长度的自适应，以及大部分布局逻辑。 然而，为了增强图表功能，建议读者添加以下功能：

子集展开/收缩功能: 允许用户交互式地展开或收缩子节点。线条颜色配置: 允许自定义线条颜色。整体展开/收缩功能: 允许用户一次性展开或收缩整个图表。图表自适应大小功能: 通过CSS3缩放或添加滚动条实现自适应。节点事件绑定: 例如鼠标悬停显示详细信息等交互功能。

通过完善这些功能，可以构建一个更强大灵活的鱼骨图绘制工具。 代码中使用自定义函数gettextwidth计算文本宽度，提高了文本渲染精度。

以上就是如何用纯HTML和JavaScript绘制一个自适应且可交互的鱼骨图？的详细内容，更多请关注创想鸟其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1115861.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

程序猿的头像

程序猿签约作者

413.8K 文章
0 评论
2 粉丝
这个人很懒，什么都没有留下～
海棠官网登录入口_海棠官方网站入口链接
上一篇 2025年12月2日 13:57:02
Picasa新建文件夹移动图片教程
下一篇 2025年12月2日 13:57:13

相关推荐

发表回复

登录后才能评论
关注微信