如何用纯HTML和JavaScript绘制复杂的自适应鱼骨图？-css教程-PHP中文网

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

聖光之護

发布： 2025-03-14 08:54:18

原创

498人浏览过

使用纯html和javascript绘制自适应鱼骨图详解

本文将详细讲解如何仅使用HTML和JavaScript，无需任何图形库（如G6），绘制复杂的、自适应的鱼骨图。示例图片展示了一个多层级鱼骨图，其绘制和自适应布局的实现较为复杂。我们将采用SVG元素进行绘制，并通过递归算法处理数据，动态计算节点位置和大小，从而实现自适应效果。

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

核心思路：利用SVG元素绘制鱼骨图的各个组成部分（矩形、圆形、线条和文本），并通过递归函数处理数据，自动计算每个节点的尺寸和位置。代码已实现以下功能：

月份宽度自适应: 每个月份的宽度根据其子项目（最长项目）的长度自动调整。
文本自适应: 所有文本元素的大小和位置根据文本内容动态调整。
层次结构: 能够准确呈现多层级鱼骨图结构。

代码仍需改进之处：

立即学习“Java免费学习笔记（深入）”；

子集展开/收缩: 目前缺少交互功能，无法展开或收缩子集。
线条颜色配置: 线条颜色固定为灰色，需要添加配置项进行自定义。
整体收缩/展开: 缺少整体收缩/展开功能。
图自适应大小: 虽然SVG是矢量图，可通过CSS缩放，但代码未实现自动适应大小，大型图表可能需要滚动条或其他机制。
节点事件: 尚未添加节点事件处理程序，需要根据实际需求添加事件监听器。

以下提供HTML和JavaScript代码框架：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自适应鱼骨图</title>
    <style>
        #svgBox {
            height: 100vh;
            width: 100vw;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
<div id="svgBox"></div>
<script>
    // ... (此处粘贴JavaScript代码) ...
</script>
</body>
</html>

登录后复制

(此处应粘贴完整的JavaScript代码，由于篇幅限制，此处省略。 JavaScript代码应包含创建SVG元素、递归绘制节点、计算节点位置和大小等功能。)

该代码利用JavaScript处理数据，并通过自定义函数简化SVG元素的创建过程。 fishbone 类负责鱼骨图的绘制，包含计算节点位置和创建SVG元素的辅助函数。运行代码后，即可在浏览器中查看生成的复杂鱼骨图。注意，代码较为复杂，需要一定的JavaScript和SVG知识才能理解和修改。

以上就是如何用纯HTML和JavaScript绘制复杂的自适应鱼骨图？的详细内容，更多请关注php中文网其它相关文章！