剑道图形状居中答案

【问题标题】：Kendo Diagram Shapes Centered剑道图形状居中
【发布时间】：2016-07-15 22:05:10
【问题描述】：

我正在关注 Telerik 网站上的基本用法示例，除了使用模型，子层次结构。我只想能够列出带有文本框的形状，并能够连接它们并在以后获得连接。到目前为止，我能够列出形状和文本框，但由于某种原因，所有形状都以图表的原点为中心。我希望能够以某种顺序列出形状，没有连接，然后稍后在图表上连接它们。这是我到目前为止的代码：

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

【问题讨论】：

标签： asp.net asp.net-mvc-4 kendo-ui

【解决方案1】：

我做了一些示例：http://dojo.telerik.com/UbECE，它使矩形一个接一个。

我正在关注 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();
    }

【讨论】：