Question

我已经用HierarchicalDataSource实现了kendo ui图。下面是代码和dojo链接https://dojo.telerik.com/arIlASAT。

要求是在图加载时动态连接形状。我曾尝试提供connectionDataSource，但无法正常工作，因此在dojo中注释了行“ //，connectionsDataSource：connectionsDataSource”。

var connections = [{
            "FromShapeId": "3",
            "ToShapeId": "7"

        }, {
                "FromShapeId": "2",
                "ToShapeId": "6"

        }];

  var connectionsDataSource = {
            data: connections,
            schema: {
                model: {

                    fields: {

                        from: {
                            from: "FromShapeId"
                            //type: "string"
                        },
                        to: {
                            from: "ToShapeId"
                            // type: "string"
                        }
                        // need a from shapeId field
                        // need a to shapeId field
                    }
                }
            }
        };

不确定connectionsDataSource是否可用于层次图！

简而言之，从上图可以看到，在加载图表时应该发生的预期连接来自“ Ann Devon” =>“ Daniel Tonini”

下面的完整代码：

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/diagram/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.material.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2018.3.911/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.3.911/js/kendo.all.min.js"></script>
    

</head>
<body>
<div id="example">
    <div id="diagram"></div>
    <script>
      var connections = [{
                "FromShapeId": "3",
                "ToShapeId": "7"

            }, {
                    "FromShapeId": "2",
                    "ToShapeId": "6"

            }];
      
      var connectionsDataSource = {
                data: connections,
                schema: {
                    model: {

                        fields: {

                            from: {
                                from: "FromShapeId"
                                //type: "string"
                            },
                            to: {
                                from: "ToShapeId"
                                // type: "string"
                            }
                            // need a from shapeId field
                            // need a to shapeId field
                        }
                    }
                }
            };
            
        var data = [{
            id:1,
            firstName: "Antonio",
            lastName: "Moreno",
            image: "antonio.jpg",
            title: "Team Lead",
            colorScheme: "#1696d3",
            items: [{
                id:2,
                firstName: "Elizabeth",
                image: "elizabeth.jpg",
                lastName: "Brown",
                title: "Design Lead",
                colorScheme: "#ef6944",
                items: [{
                    id:3,
                    firstName: "Ann",
                    lastName: "Devon",
                    image: "ann.jpg",
                    title: "UI Designer",
                    colorScheme: "#ef6944"
                }]
            }, {
                id:4,
                firstName: "Diego",
                lastName: "Roel",
                image: "diego.jpg",
                title: "QA Engineer",
                colorScheme: "#ee587b",
                items: [{
                    id:5,
                    firstName: "Fran",
                    lastName: "Wilson",
                    image: "fran.jpg",
                    title: "QA Intern",
                    colorScheme: "#ee587b"
                }]
            }, {
                id:6,
                firstName: "Felipe",
                lastName: "Izquiedro",
                image: "felipe.jpg",
                title: "Senior Developer",
                colorScheme: "#75be16",
                items: [{
                    id:7,
                    firstName: "Daniel",
                    lastName: "Tonini",
                    image: "daniel.jpg",
                    title: "Developer",
                    colorScheme: "#75be16"
                }]
            }]
        }];

        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"
            }));

            g.append(new dataviz.diagram.Image({
                source: "../content/dataviz/diagram/people/" + dataItem.image,
                x: 3,
                y: 3,
                width: 68,
                height: 68
            }));

            return g;
        }

        function createDiagram() {
            $("#diagram").kendoDiagram({
                dataSource: new kendo.data.HierarchicalDataSource({
                    data: data,
                    schema: {
                        model: {
                            children: "items"
                        }
                    }
                }),
               editable: {
                    rotate: false,
                    resize: false
                },
              selectable: true,
                zoomRate: 0,
                dataBound: function () {
                    var bbox = this.boundingBox();
                    this.wrapper.width(bbox.width + bbox.x + 50);
                    this.wrapper.height(bbox.height + bbox.y + 50);
                    this.resize();
                },
                layout: {
                   type: "tree",
                    subtype: "tipover",
                    horizontalSeparation: 150,
                    verticalSeparation: 20
                },
                shapeDefaults: {
                  editable: {
                        drag: false
                    },
                    visual: visualTemplate
                },
               connectionDefaults: {
                    //below is to delete the connections
                    editable: {
                        tools: [{
                            name: "delete"
                        }]
                    },
                    endCap: {
                        type: "ArrowEnd",
                        fill: "blue"
                    },
                    stroke: {
                        color: "#979797",
                        width: 2
                    }
                }
               ,
                shapes: {
                    
                    editable: {
                        connect: false
                    }
                }
               
                //,connectionsDataSource: connectionsDataSource      
            });

            var diagram = $("#diagram").getKendoDiagram();
            diagram.bringIntoView(diagram.shapes);
        }

        $(document).ready(createDiagram);
    </script>
</div>


</body>
</html>

让我知道是否有人遇到这些情况。谢谢

编辑：使用dojo https://dojo.telerik.com/OYupExUq尝试了另一组示例，但无法获得连接

Kendo UI图-HierarchicalDataSource-设置连接数据源问题

0 个答案: