2017-09-08 28 views
1

我想在html按钮上单击绘制圆图(宁愿在kendo图形工具栏上工作不太好),addShape方法似乎工作正常,没有任何错误,但图不会显示在页面上。 但是,在初始剑道图加载时,圆圈没有问题。kendo图在点击上添加圆圈

$(document).ready(createDiagram); 
 

 
function createDiagram() { 
 
    $("#diagram").kendoDiagram({ 
 
    shapes: [{ 
 
     type: 'circle', 
 
     fill: { 
 
      color: 'blue' 
 
     } 
 
     }, 
 
     { 
 
     type: 'rectangle' 
 
     } 
 
    ], 
 
    shapeDefaults: { 
 
     editable: { 
 
     tools: ["createShape", "delete", "rotateClockwise", "rotateAnticlockwise"] 
 
     } 
 
    }, 
 
    connectionDefaults: { 
 
     stroke: { 
 
     color: "#979797", 
 
     width: 1 
 
     }, 
 
     type: "polyline", 
 
     startCap: "FilledCircle", 
 
     endCap: "ArrowEnd" 
 
    }, 
 
    editable: { 
 
     tools: ["createShape", "delete", "rotateClockwise", "rotateAnticlockwise"] 
 
    } 
 
    }); 
 
    $("#diagram").getKendoDiagram().layout(); 
 
} 
 

 
function drawCircle() { 
 
    var diagram = $("#diagram").getKendoDiagram(); 
 

 
    /*diagram.addShape(new kendo.dataviz.diagram.Point(100, 220), { 
 
    background: "red" 
 
    });*/ 
 
    diagram.addShape(new kendo.dataviz.diagram.Circle({ 
 
    radius: 600, 
 
    stroke: { 
 
     width: 5, 
 
     color: "#586477" 
 
    }, 
 
    fill: "#e8eff7" 
 
    })); 
 
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script> 
 
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common-material.min.css" /> 
 
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.min.css" /> 
 
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.mobile.min.css" /> 
 
<base href="http://demos.telerik.com/kendo-ui/diagram/events"> 
 

 

 
<input type="button" class="btn btn-warning" value="Circle" onclick="drawCircle();" /> 
 
<div id="diagram"></div>

回答

0

我认为这个问题可能会发生,你有可能有你的HTML后,把你的JS代码。即在</body>标签结束之后。这可能会导致问题。

在此工作DEMO中,我已将所有JS代码放入<head>标记中,现在函数dramCircle()正在成功调用。