使用純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)創建實例完成繪制。
代碼實現了月份節點自適應寬度、文本自適應顯示和節點連接。 但仍需完善子節點展開/收縮、線條顏色配置、整體展開/收縮和圖表自適應大小等功能。 開發者可在此基礎上進行擴展。
? 版權聲明
文章版權歸作者所有,未經允許請勿轉載。
THE END