使用纯HTML和JavaScript绘制精美的鱼骨图
本文演示如何仅使用html和javascript创建复杂的鱼骨图，无需依赖像g6之类的图形库。 虽然原问题建议使用g6，但html5的svg和javascript提供了更直接、更灵活的解决方案。
目标鱼骨图包含月份主干和多层分支，每个分支可能包含多个子项。这需要处理复杂的层次结构和动态布局。
以下代码片段展示了如何构建类似的鱼骨图，基于HTML5 SVG和JavaScript，而非G6。代码实现了根据子项长度自动调整月份宽度，文字显示和底部线段长度也随文字长度动态变化。
为了保留一些挑战和学习空间，部分功能（例如子集展开/收缩、线条颜色自定义、整体展开/收缩以及自适应大小和节点事件）未完全实现，留待读者自行完善。
立即学习“Java免费学习笔记（深入）”；
Document
代码首先定义了鱼骨图的数据结构arr，这是一个包含月份和子项信息的数组。fishbone类负责创建和绘制整个鱼骨图。gettextwidth函数计算文本宽度，确保文本和图形元素正确对齐。createmonth函数绘制月份主干，creatbigcircle函数绘制主要分支节点和子节点，renderparent函数递归绘制子节点，randerleaf函数绘制叶子节点。getmaxchildheight函数计算子节点的最大层级，辅助布局。
此示例展示了HTML5 SVG和JavaScript在绘制复杂图形方面的灵活性，无需外部图形库。读者可根据需要修改和扩展代码，实现更丰富的功能。
