本文介绍如何使用纯HTML和JavaScript绘制一个自适应交互式鱼骨图，无需任何外部图形库。 通过HTML5的SVG元素和自定义的JavaScript类`fishbone`，实现多层级节点的绘制、文本显示以及节点宽度自适应。代码已包含核心布局逻辑，并提供进一步优化的建议，例如添加子集展开/收缩、线条颜色自定义、整体展开/收缩、图表自适应大小以及节点事件绑定等交互功能，以提升用户体验和图表功能。 学习本文，您可以掌握使用HTML和JS构建复杂可交互鱼骨图的方法。

用纯HTML和JavaScript绘制自适应交互式鱼骨图

本文介绍如何仅使用HTML和JavaScript创建类似鱼骨图的图表，无需依赖外部图形库如G6。 目标是创建一个多层级、自适应大小、并支持文本显示的鱼骨图，类似于示例图片所示的复杂图表。以下代码实现了大部分功能，并指出了可进一步优化的方向。

代码利用HTML5的SVG元素进行绘图，数据采用JSON格式存储，方便修改和扩展。 核心代码围绕一个名为fishbone的类，负责图表的绘制和布局。

基本代码结构如下：

<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>自适应鱼骨图</title><div id="svgBox"></div>
<script>
    // ... (完整的JavaScript代码，请参考原文或自行补充) ...
</script><style>
    #svgBox {
        height: 100vh;
        width: 100vw;
        background-color: antiquewhite;
    }
</style>

代码首先定义SVG画布，然后fishbone类负责绘制。该类包含多个方法，例如main方法初始化和渲染；initkvarray计算节点宽度；randermonthbox绘制节点框；randerfirstcircle绘制一级子节点；creatbigcircle递归绘制后续层级；getlinewidth计算文本宽度；getmaxchildheight计算子集最大高度；createtag简化SVG元素创建；以及createmonth、renderparent和randerleaf分别绘制节点框、父节点和叶子节点。

代码已实现节点宽度和文字长度的自适应，以及大部分布局逻辑。 然而，为了增强图表功能，建议读者添加以下功能：

• 子集展开/收缩功能: 允许用户交互式地展开或收缩子节点。
• 线条颜色配置: 允许自定义线条颜色。
• 整体展开/收缩功能: 允许用户一次性展开或收缩整个图表。
• 图表自适应大小功能: 通过CSS3缩放或添加滚动条实现自适应。
• 节点事件绑定: 例如鼠标悬停显示详细信息等交互功能。

通过完善这些功能，可以构建一个更强大灵活的鱼骨图绘制工具。 代码中使用自定义函数gettextwidth计算文本宽度，提高了文本渲染精度。

终于介绍完啦！小伙伴们，这篇关于《自适应交互鱼骨图HTML+JS绘制攻略》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！