答案 0 :(得分:4)
查找树形图 / 树形图。这就是Wikipedia描述它们的方式:
"在信息可视化和计算中,树图是一种通过使用嵌套矩形显示分层数据的方法。 [...]
Treemaps将分层(树形结构)数据显示为一组 嵌套的矩形。树的每个分支都有一个矩形,其中 然后用表示子分支的较小矩形平铺。一个 叶节点的矩形具有与指定的比例的面积 数据的维度。"
使用这种技术的一个值得注意的工具是WinDirStat。他们的网站也将这种可视化称为树形图。
根据这个术语,您应该能够轻松找到一个只需执行a web search即可生成它们的JavaScript库。 (我不能推荐以下任何一项,因为我还没有使用它们,但链接的Google搜索在第一个结果页面上找到了jsTreemap,Plotly.js,Google Charts和其他几个。)
如果您对这些图表背后的算法感到好奇,可能会对这些论文感兴趣:
答案 1 :(得分: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({
id : 'myChart',
data : myConfig,
height: 400,
width: 600
});
<head>
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
<script>zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9","ee6b7db5b51705a13dc2339db3edaf6d"];</script>
</head>
<body>
<div id='myChart'></div>
</body>
有关树图的更多信息,请阅读此博文:https://blog.zingchart.com/2015/03/10/treemaps-charting/
免责声明:我是ZingChart团队的成员。如果您有更多问题,请与我们联系。谢谢!