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

本文演示如何仅使用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>

登录后复制