Kendo图直到页面调整大小后才会显示

Question

我有一个HTML页面，其中有div。从单独的js文件中，我将Kendo图绑定到该div。在页面调整大小之前，该图将不会显示。

Html Page

<div id="center-pane" class="col-sm-10">
                    <div>
                        <div id="d1" style="height: 400px;"></div>
                    </div>
                </div>

jf file

var d2 = $("#d1").kendoDiagram({
               shapes: [
                {
                    id: "1",
                    content: {
                        text: "Monday"
                    }
                },
                {
                    id: "2",
                    content: "Tuesday"
                }
            ],
            connections: [

                {
                    from: "1",
                    to: "2"
                }
            ],
            layout: {
                type: "tree"
            },
}).getKendoDiagram();

Answer 1

如果<div>不可见，则意味着它没有很好地定义高度和宽度。然后在中渲染图是没有意义的。为了避免产生斑点，我们必须添加高度和宽度。

<div id="center-pane" class="col-sm-10">
     <div>
        <div id="d1" style="height: 400px; width : 400px;"></div>
     </div>
</div>