用純html和JavaScript繪制自適應(yīng)交互式魚骨圖

本文介紹如何僅使用html和javascript創(chuàng)建類似魚骨圖的圖表，無需依賴外部圖形庫如g6。 目標(biāo)是創(chuàng)建一個(gè)多層級(jí)、自適應(yīng)大小、并支持文本顯示的魚骨圖，類似于示例圖片所示的復(fù)雜圖表。以下代碼實(shí)現(xiàn)了大部分功能，并指出了可進(jìn)一步優(yōu)化的方向。

代碼利用html5的SVG元素進(jìn)行繪圖，數(shù)據(jù)采用json格式存儲(chǔ)，方便修改和擴(kuò)展。 核心代碼圍繞一個(gè)名為fishbone的類，負(fù)責(zé)圖表的繪制和布局。

基本代碼結(jié)構(gòu)如下：

<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>自適應(yīng)魚骨圖</title> <div id="svgBox"></div> <script>     // ... (完整的JavaScript代碼，請參考原文或自行補(bǔ)充) ... </script> <style>     #svgBox {         height: 100vh;         width: 100vw;         background-color: antiquewhite;     } </style>

代碼首先定義SVG畫布，然后fishbone類負(fù)責(zé)繪制。該類包含多個(gè)方法，例如main方法初始化和渲染；initkvarray計(jì)算節(jié)點(diǎn)寬度；randermonthbox繪制節(jié)點(diǎn)框；randerfirstcircle繪制一級(jí)子節(jié)點(diǎn)；creatbigcircle遞歸繪制后續(xù)層級(jí)；getlinewidth計(jì)算文本寬度；getmaxchildheight計(jì)算子集最大高度；createtag簡化SVG元素創(chuàng)建；以及createmonth、renderparent和randerleaf分別繪制節(jié)點(diǎn)框、父節(jié)點(diǎn)和葉子節(jié)點(diǎn)。

立即學(xué)習(xí)“Java免費(fèi)學(xué)習(xí)筆記（深入）”；

代碼已實(shí)現(xiàn)節(jié)點(diǎn)寬度和文字長度的自適應(yīng)，以及大部分布局邏輯。 然而，為了增強(qiáng)圖表功能，建議讀者添加以下功能：

• 子集展開/收縮功能: 允許用戶交互式地展開或收縮子節(jié)點(diǎn)。
• 線條顏色配置: 允許自定義線條顏色。
• 整體展開/收縮功能: 允許用戶一次性展開或收縮整個(gè)圖表。
• 圖表自適應(yīng)大小功能: 通過css3縮放或添加滾動(dòng)條實(shí)現(xiàn)自適應(yīng)。
• 節(jié)點(diǎn)事件綁定: 例如鼠標(biāo)懸停顯示詳細(xì)信息等交互功能。

通過完善這些功能，可以構(gòu)建一個(gè)更強(qiáng)大靈活的魚骨圖繪制工具。 代碼中使用自定義函數(shù)gettextwidth計(jì)算文本寬度，提高了文本渲染精度。