这个图表的名称是什么?
What is the name of this chart?
这种图表有具体的名称吗? JavaScript 图表库有什么?
查找 treemaps / treemapping。 Wikipedia 是这样描述他们的:
"In information visualization and computing, treemapping is a method for displaying hierarchical data by using nested rectangles. […]
Treemaps display hierarchical (tree-structured) data as a set of
nested rectangles. Each branch of the tree is given a rectangle, which
is then tiled with smaller rectangles representing sub-branches. A
leaf node's rectangle has an area proportional to a specified
dimension of the data."
利用此技术的一个著名工具是 WinDirStat。他们的网站也将这种可视化称为树状图。
鉴于这个术语,您应该能够轻松找到一个 JavaScript 库,只需执行 a web search 即可生成它们。 (我不能推荐以下任何一个,因为我没有使用过它们,但是链接的 Google 搜索找到 jsTreemap、Plotly.js、Google 图表和其他一些,在第一个结果页。)
如果您对这些图表背后的算法感到好奇,可能会对这些论文感兴趣:
它被称为 treemap, and 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>
有关树状图的更多信息,请阅读此博客 post:https://blog.zingchart.com/2015/03/10/treemaps-charting/
免责声明:我是 ZingChart 团队的一员。如果您有更多问题,请告诉我。谢谢!
这种图表有具体的名称吗? JavaScript 图表库有什么?
查找 treemaps / treemapping。 Wikipedia 是这样描述他们的:
"In information visualization and computing, treemapping is a method for displaying hierarchical data by using nested rectangles. […]
Treemaps display hierarchical (tree-structured) data as a set of nested rectangles. Each branch of the tree is given a rectangle, which is then tiled with smaller rectangles representing sub-branches. A leaf node's rectangle has an area proportional to a specified dimension of the data."
利用此技术的一个著名工具是 WinDirStat。他们的网站也将这种可视化称为树状图。
鉴于这个术语,您应该能够轻松找到一个 JavaScript 库,只需执行 a web search 即可生成它们。 (我不能推荐以下任何一个,因为我没有使用过它们,但是链接的 Google 搜索找到 jsTreemap、Plotly.js、Google 图表和其他一些,在第一个结果页。)
如果您对这些图表背后的算法感到好奇,可能会对这些论文感兴趣:
它被称为 treemap, and 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>
有关树状图的更多信息,请阅读此博客 post:https://blog.zingchart.com/2015/03/10/treemaps-charting/
免责声明:我是 ZingChart 团队的一员。如果您有更多问题,请告诉我。谢谢!