3
A
回答
4
查找樹圖/矩形式樹狀結構繪圖法。這是如何Wikipedia描述它們:
「以信息的可視化和計算,矩形式樹狀結構繪圖法是用於通過使用嵌套的矩形顯示的階層數據的方法[...]
樹狀圖顯示分層(樹形結構)數據作爲一組 嵌套矩形,樹的每個分支都被賦予一個矩形,然後 用代表子分支的較小矩形平鋪A 葉節點的矩形具有與指定的數據維度成比例的面積 「。
利用這種技術的一個值得注意的工具是WinDirStat。他們的網站也將這種可視化方式稱爲樹形圖。
鑑於此術語,您應該能夠輕鬆找到一個可通過執行a web search即可生成它們的JavaScript庫。 (我不推薦以下任何內容,因爲我沒有使用它們,但鏈接的Google搜索在第一個結果頁面上找到了jsTreemap,Plotly.js,Google Charts和其他一些內容)。
If你好奇的算法(一個或多個)這些圖的背後,這些文件可能會感興趣:
3
它被稱爲treemap,而ZingChart是一個JavaScript圖表庫。這是繪製分層數據的有用方法。它還允許用戶進行交互,因爲用戶可以進一步鑽取樹形圖。看看下面的演示。
var myConfig = {
"graphset":[
{
"type":"treemap",
"plotarea":{
"margin":"0 0 30 0"
},
"tooltip":{
},
"options":{
},
"series":[
{
"text":"North America",
"children":[
{
"text":"United States",
"children":[
{
"text":"Texas",
"value":21
},
{
"text":"California",
"value":53
},
{
"text":"Ohio",
"value":12
},
{
"text":"New York",
"value":46
},
{
"text":"Michigan",
"value":39
},
{
"text":"Alabama",
"value":25
}
]
},
{
"text":"Canada",
"value":113
},
{
"text":"Mexico",
"value":78
}
]
},
{
"text":"Europe",
"children":[
{
"text":"France",
"value":42
},
{
"text":"Spain",
"value":28
},
{
"text":"Switzerland",
"value":13
},
{
"text":"Germany",
"value":56
},
{
"text":"Cyprus",
"value":7
}
]
},
{
"text":"Africa",
"children":[
{
"text":"Egypt",
"value":22
},
{
"text":"Congo",
"value":38
},
{
"text":"Lesotho",
"value":9
}
]
},
{
"text":"Asia",
"children":[
{
"text":"India",
"value":92
},
{
"text":"China",
"value":68
},
{
"text":"Mongolia",
"value":25
}
]
},
{
"text":"South America",
"children":[
{
"text":"Brazil",
"value":42
},
{
"text":"Argentina",
"value":28
},
{
"text":"Peru",
"value":15
},
{
"text":"Uruguay",
"value":33
}
]
},
{
"text":"Australia (continent)",
"children":[
{
"text":"Australia (country)",
"value":121
},
{
"text":"New Zealand",
"value":24
}
]
}
]
}
]
};
zingchart.render({
\t id : 'myChart',
\t data : myConfig,
\t height: 400,
\t width: 600
});
<head>
\t \t <script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
<script>zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
\t \t ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9","ee6b7db5b51705a13dc2339db3edaf6d"];</script>
\t </head>
\t <body>
\t \t <div id='myChart'></div>
\t </body>
關於樹圖的更多信息,請閱讀這篇博客:https://blog.zingchart.com/2015/03/10/treemaps-charting/
免責聲明:我在ZingChart隊。如果您有更多問題,請告訴我。謝謝!
相關問題
- 1. 這些圖表的名稱是什麼?
- 2. 此按鈕的名稱是什麼?
- 3. 此圖片中Visual Studio2012的主題名稱是什麼
- 4. 我的表單的名稱是什麼
- 5. 截圖方法的名稱是什麼
- 6. 什麼是mylocation圖標的名稱
- 7. 值/頻率表的名稱是什麼?
- 8. 保存表或視圖名稱的配置值的好名稱是什麼?
- 9. 圖表轉換 - 它的名稱是什麼?
- 10. 此語法功能的正式名稱是什麼?
- 11. 什麼是此對象的名稱,我該如何使用它?
- 12. HTML/CSS - 什麼是此菜單的名稱?
- 13. 此NetBeans主題屬性的名稱是什麼?
- 14. 此退出菜單的名稱是什麼?
- 15. Android下此佈局的名稱是什麼?
- 16. Android上此菜單式佈局項的名稱是什麼?
- 17. 此模式的名稱/用途是什麼?
- 18. 這是什麼名稱?
- 19. 爲什麼jQuery被稱爲jQuery?名稱的原因是什麼?
- 20. 這個表達式文件名的新名稱是什麼?
- 21. 是否有此名稱:「 - >」
- 22. VS是什麼名稱下的類,功能等下拉列表的名稱?
- 23. 什麼是「:名稱」是指在Ruby中
- 24. 什麼ClassLoader.load(名稱)和的Class.forName(名稱)
- 25. JOIN部分的名稱是什麼
- 26. 什麼是QueuePause中的接口名稱
- 27. 這種形式的名稱是什麼?
- 28. 滾動背景的名稱是什麼?
- 29. 這種技術的名稱是什麼?
- 30. Web顏色#ccc的名稱是什麼?