Kendo圖形集中

Question

我正在從Telerik網站的基本用法的例子，除了使用模型，兒童Heirarchy。我只是希望能夠用文本框列出形狀，並能夠連接它們並稍後獲取連接。到目前爲止，我可以列出形狀和文本框，但出於某種原因，所有形狀都集中在圖的原點上。我希望能夠按照某種順序列出形狀，無需連接，然後再在圖表上連接它們。這裏是我到目前爲止的代碼：使矩形一個接一個地排列http://dojo.telerik.com/UbECE：

var data = [{ 
      firstName: "Antonio", 
      lastName: "Moreno", 
      title: "Team Lead", 
      colorScheme: "#1696d3" 
     }, 
     { 
      firstName: "Alfredo", 
      lastName: "Morales", 
      title: "Team Lead", 
      colorScheme: "#1696d3" 

     }]; 

     function visualTemplate(options) { 
      var dataviz = kendo.dataviz; 
      var g = new dataviz.diagram.Group(); 
      var dataItem = options.dataItem; 

      g.append(new dataviz.diagram.Rectangle({ 
       width: 210, 
       height: 75, 
       stroke: { 
        width: 0 
       }, 
       fill: { 
        gradient: { 
         type: "linear", 
         stops: [{ 
          color: dataItem.colorScheme, 
          offset: 0, 
          opacity: 0.5 
         }, { 
          color: dataItem.colorScheme, 
          offset: 1, 
          opacity: 1 
         }] 
        } 
       } 
      })); 

      g.append(new dataviz.diagram.TextBlock({ 
       text: dataItem.firstName + " " + dataItem.lastName, 
       x: 85, 
       y: 20, 
       fill: "#fff" 
      })); 

      g.append(new dataviz.diagram.TextBlock({ 
       text: dataItem.title, 
       x: 85, 
       y: 40, 
       fill: "#fff" 
      })); 

      return g; 
     } 

     function createDiagram() { 
      $("#diagram").kendoDiagram({ 
       dataSource: new kendo.data.HierarchicalDataSource({ 
        data: data, 
       }), 
       shapeDefaults: { 
        visual: visualTemplate 
       }, 
      }); 

      var diagram = $("#diagram").getKendoDiagram(); 
      diagram.bringIntoView(diagram.shapes); 
     } 

     $(document).ready(createDiagram); 

Answer 1

我做了一些樣品。

我下面從API文檔這個例子http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/diagram#configuration-shapeDefaults.visual

他們正在使用：

$("#diagram").getKendoDiagram().layout(); 

其中工程。

函數要成爲：

function createDiagram() { 
     $("#diagram").kendoDiagram({ 
      dataSource : data, 
      shapeDefaults: { 
       visual: visualTemplate 
      }, 
     }); 

     $("#diagram").getKendoDiagram().layout(); 
    }