如何用純HTML和JavaScript繪制精美的可自適應魚骨圖?

使用純htmlJavaScript繪制自適應魚骨圖

本文介紹如何用純HTML和JavaScript創建一個可自適應的魚骨圖,無需依賴外部圖形庫如G6。 示例圖片展示了一個復雜的層次結構圖,其繪制需要考慮節點層次、文本自適應、子節點展開/收縮等。以下代碼實現了核心功能,并指明了可改進之處。

核心思路是利用SVG元素構建圖形。通過遞歸遍歷數據,創建節點和連接線,并根據文本長度動態調整節點大小和位置。

如何用純HTML和JavaScript繪制精美的可自適應魚骨圖?

首先,我們需要json格式的數據:

立即學習Java免費學習筆記(深入)”;

const arr = [     // ... (數據內容與問題答案中代碼一致) ];

JavaScript代碼負責繪制圖表。FishBone類包含創建SVG元素、繪制月份節點、主干節點和葉子節點的方法。createmonth繪制月份節點(平行四邊形),寬度根據子節點寬度自適應。creatbigcircle繪制主干節點,renderparent遞歸繪制子節點,randerleaf繪制葉子節點(包含時間和描述)。gettextwidth函數計算文本寬度,確保文本完整顯示并自適應節點寬度。

/**  * 計算文本寬度  * @param {string} text 文本內容  * @param {string} fontweight 字體粗細  * @param {string} fontsize 字體大小  * @param {string} fontfamily 字體族  * @returns {number} 文本寬度  */ let utilcanvas = null; const gettextwidth = (     text,     fontweight = 'normal',     fontsize = '14px',     fontfamily = '黑體' ) => {     // ... (代碼與問題答案中代碼一致) };  class FishBone {     // ... (代碼與問題答案中代碼一致) }

createtag函數簡化SVG元素創建。最后,new FishBone(arr)創建實例完成繪制。

代碼實現了月份節點自適應寬度、文本自適應顯示和節點連接。 但仍需完善子節點展開/收縮、線條顏色配置、整體展開/收縮和圖表自適應大小等功能。 開發者可在此基礎上進行擴展。

? 版權聲明
THE END
喜歡就支持一下吧
點贊10 分享