本文演示如何仅使用html和javascript创建复杂的鱼骨图，无需依赖像g6之类的图形库。 虽然原问题建议使用g6，但html5的svg和javascript提供了更直接、更灵活的解决方案。
目标鱼骨图包含月份主干和多层分支，每个分支可能包含多个子项。这需要处理复杂的层次结构和动态布局。
以下代码片段展示了如何构建类似的鱼骨图，基于HTML5 SVG和JavaScript，而非G6。代码实现了根据子项长度自动调整月份宽度，文字显示和底部线段长度也随文字长度动态变化。
为了保留一些挑战和学习空间，部分功能（例如子集展开/收缩、线条颜色自定义、整体展开/收缩以及自适应大小和节点事件）未完全实现，留待读者自行完善。
立即学习“Java免费学习笔记（深入）”；
<meta charset="UTF-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Document</title>
<style>
#svgBox {
height: 100vh;
width: 100vw;
background-color: antiquewhite;
}
</style>
<div id="svgBox"></div>
<script>
// ... (此处为完整的JavaScript代码，与问题答案中提供的代码一致)
</script>代码首先定义了鱼骨图的数据结构arr，这是一个包含月份和子项信息的数组。fishbone类负责创建和绘制整个鱼骨图。gettextwidth函数计算文本宽度，确保文本和图形元素正确对齐。createmonth函数绘制月份主干，creatbigcircle函数绘制主要分支节点和子节点，renderparent函数递归绘制子节点，randerleaf函数绘制叶子节点。getmaxchildheight函数计算子节点的最大层级，辅助布局。
此示例展示了HTML5 SVG和JavaScript在绘制复杂图形方面的灵活性，无需外部图形库。读者可根据需要修改和扩展代码，实现更丰富的功能。
以上就是如何用纯HTML和JavaScript绘制复杂的鱼骨图？的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
164
