以下是创建treemap的代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.treemap.js"></script>
</head>
<body>
<div id="treemap"></div>
<script type="text/javascript">
$(document).ready(function () {
$("#treemap").treemap({
"nodeData": {
id: "root", "children": [
{
id: "NY",
size: [.8],
color: [1]
},
{
id: "NA",
size: [.8],
color: [1]
},
{
id: "SP",
size: [.6],
color: [1]
},
{
id: "NQ",
size: [.6],
color: [1]
},
{
id: "V",
size: [.6],
color: [1]
},
{
id: "R",
size: [.4],
color: [1]
},
{
id: "DJ",
size: [.4],
color: [1]
},
{
id: "BY",
size: [.6],
color: [1]
},
]
}
});
});
</script>
</body>
</html>
当我运行此页面时，我只能看到两个条形NY和NA而其他条形图未显示，不确定为什么会这样。我是第一次使用树形图，所以实际上并没有清楚所有的概念。我已经使用了他们的样本并且它可以工作但是当我根据我的要求进行更改时它不会显示。
请告知为什么它没有显示其他节点？
答案 0 :(得分：1)
在nodeData中，大小数据的总和应该是1.在你的问题中，总和大于1.这就是为什么你只获得前两个部分（NY大小.8和NY大小.2。）（。 NA中的6个不可见））。如果给出大小为1的大小值，问题就会解决。
$(document).ready(function () {
$("#treemap").treemap({
"nodeData": {
id: "root", "children": [
{
id: "NY",
size: [.2],
color: [1]
},
{
id: "NA",
size: [.1],
color: [1]
},
{
id: "SP",
size: [.1],
color: [1]
},
{
id: "NQ",
size: [.1],
color: [1]
},
{
id: "V",
size: [.1],
color: [1]
},
{
id: "R",
size: [.1],
color: [1]
},
{
id: "DJ",
size: [.1],
color: [1]
},
{
id: "BY",
size: [.2],
color: [1]
},
]
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="https://www.jqueryscript.net/demo/jQuery-Treemap-Plugin-for-Hierarchical-Data-jsTreemap/js/jquery.ui.treemap.js"></script>
<div id="treemap"></div>