2014-10-28 6 views
4

Я пытаюсь создать очень простой treemap (без иерархии), используя KendoUI, предоставив ему некоторые данные json в качестве источника данных. Это должно было быть очень простым и простым, поскольку это обычный случай использования. Тем не менее, мне не повезло с этим, потратив на это часы.Kendo UI treemap json binding

Я попытался это:

<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> 

Любые предложения о том, что я могу не быть?

ответ

4

Как указано в docs «TreeMap является визуализацией иерархического»:

тримапинга является визуализацией для иерархических данных, которая использует вложенные прямоугольников. Размер каждого прямоугольника и цвет связан с структурой данных, что позволяет более легко определить тенденции и модели

Так что попробуйте добавить «корневой» уровень, который оборачивает ваши два элемента:

<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> 
+0

Спасибо, что сделал. Я не знал, что могу представить только иерархические данные в treemap KendoUI. Я встретил этот пример для цветов в документации (http://dojo.telerik.com/eFAWI), которая не имеет иерархической структуры и поэтому вводит в заблуждение. – idok

Смежные вопросы