使用纯html和javascript绘制自适应鱼骨图详解
本文将详细讲解如何仅使用HTML和JavaScript，无需任何图形库（如G6），绘制复杂的、自适应的鱼骨图。示例图片展示了一个多层级鱼骨图，其绘制和自适应布局的实现较为复杂。 我们将采用SVG元素进行绘制，并通过递归算法处理数据，动态计算节点位置和大小，从而实现自适应效果。
核心思路：利用SVG元素绘制鱼骨图的各个组成部分（矩形、圆形、线条和文本），并通过递归函数处理数据，自动计算每个节点的尺寸和位置。 代码已实现以下功能：
- 月份宽度自适应: 每个月份的宽度根据其子项目（最长项目）的长度自动调整。
- 文本自适应: 所有文本元素的大小和位置根据文本内容动态调整。
- 层次结构: 能够准确呈现多层级鱼骨图结构。
代码仍需改进之处：
立即学习“Java免费学习笔记（深入）”；
- 子集展开/收缩: 目前缺少交互功能，无法展开或收缩子集。
- 线条颜色配置: 线条颜色固定为灰色，需要添加配置项进行自定义。
- 整体收缩/展开: 缺少整体收缩/展开功能。
- 图自适应大小: 虽然SVG是矢量图，可通过CSS缩放，但代码未实现自动适应大小，大型图表可能需要滚动条或其他机制。
- 节点事件: 尚未添加节点事件处理程序，需要根据实际需求添加事件监听器。
以下提供HTML和JavaScript代码框架：
自适应鱼骨图
(此处应粘贴完整的JavaScript代码，由于篇幅限制，此处省略。 JavaScript代码应包含创建SVG元素、递归绘制节点、计算节点位置和大小等功能。)
该代码利用JavaScript处理数据，并通过自定义函数简化SVG元素的创建过程。 fishbone 类负责鱼骨图的绘制，包含计算节点位置和创建SVG元素的辅助函数。 运行代码后，即可在浏览器中查看生成的复杂鱼骨图。 注意，代码较为复杂，需要一定的JavaScript和SVG知识才能理解和修改。
