如何用纯HTML和JavaScript绘制复杂的鱼骨图？

wufei123 2025-03-12 阅读:20 评论:0

使用纯HTML和JavaScript绘制精美的鱼骨图本文演示如何仅使用html和javascript创建复杂的鱼骨图，无需依赖像g6之类的图形库。虽然原问题建议使用g6，但html5的svg和javascript提供了更直接、更灵活的...

使用纯HTML和JavaScript绘制精美的鱼骨图

本文演示如何仅使用html和javascript创建复杂的鱼骨图，无需依赖像g6之类的图形库。虽然原问题建议使用g6，但html5的svg和javascript提供了更直接、更灵活的解决方案。

目标鱼骨图包含月份主干和多层分支，每个分支可能包含多个子项。这需要处理复杂的层次结构和动态布局。

以下代码片段展示了如何构建类似的鱼骨图，基于HTML5 SVG和JavaScript，而非G6。代码实现了根据子项长度自动调整月份宽度，文字显示和底部线段长度也随文字长度动态变化。

为了保留一些挑战和学习空间，部分功能（例如子集展开/收缩、线条颜色自定义、整体展开/收缩以及自适应大小和节点事件）未完全实现，留待读者自行完善。

如何用纯HTML和JavaScript绘制复杂的鱼骨图？

PHP

<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绘制复杂的鱼骨图？的详细内容，更多请关注知识资源分享宝库其它相关文章！