Kendo Diagram Shapes Centered

Question

Ich folge dem Beispiel von der Telerik-Website für Basic Usage mit Ausnahme der Verwendung eines Modells, Kinderhierarchie. Ich möchte nur Formen mit Textfeldern auflisten und in der Lage sein, sie zu verbinden und die Verbindungen später zu bekommen. Bis jetzt kann ich die Formen und die Textfelder auflisten, aber aus irgendeinem Grund werden alle Formen auf den Ursprung des Diagramms zentriert. Ich möchte in der Lage sein, die Formen in einer bestimmten Reihenfolge ohne Verbindungen aufzulisten und sie später im Diagramm zu verbinden. Hier ist der Code, den ich bisher habe:

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

ich eine Probe gemacht haben: http://dojo.telerik.com/UbECE, die Rechtecke eine neben dem anderen macht.

Ich verfolge dieses Beispiel aus API-Dokumentation http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/diagram#configuration-shapeDefaults.visual

Sie verwenden:

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

die funktioniert.

Ihre Funktion wurde:

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

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