Question

我一直在尝试使用KendoUI构建一个非常简单的树形图（没有层次结构），通过提供一些json数据作为数据源。这应该是非常简单和简单的，因为它是一个常见的用例。但是，花了好几个小时之后，我没有运气了。

我试过了：

<body>
<div id="treemap"></div> 
<script> 
var data = [
    {
    name: "foo123",
    value: 10
    },
    {
    name: "foo234",
    value: 20
    }
   ];
$("#treemap").kendoTreeMap({
dataSource: data,
valueField: "value",
textField: "name"
});
</script>
</body>

有关我可能遗失的任何建议吗？

Answer 1

如docs中所述，“TreeMap是层次结构的可视化”：

TreeMapping是使用嵌套的分层数据的可视化矩形。每个矩形的大小和颜色都与数据结构，让您更轻松地识别趋势和图案

因此，请尝试添加包含两个元素的“根”级别：

<body>
    <div id="treemap"></div>
    <script>
        var data = [{
            name: "foo",
            value: 1,
            items: [{
                name: "foo123",
                value: 10
            },
            {
                name: "foo234",
                value: 20
            }]
        }];
        $("#treemap").kendoTreeMap({
            dataSource: data,
            valueField: "value",
            textField: "name"
        });
    </script>
</body>

Kendo UI treemap json绑定

1 个答案: