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

使用純html和JavaScript繪制自適應魚骨圖

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

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

首先，我們需要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)創建實例完成繪制。

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