用純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ì)算文本寬度,提高了文本渲染精度。