我试图在 html 按钮单击上绘制圆形图(更喜欢在剑道图工具栏上绘制圆形图，但它也不起作用)，addShape 方法似乎工作正常，没有任何错误，但该图没有显示在这一页。 然而，在初始剑道图加载时，绘制圆圈没有任何问题。
$(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>最佳答案
我认为问题可能会发生，因为您可能将 JS 代码放在 HTML 后面。即在</body>之后标签结束。这可能会导致问题。
在此工作中DEMO ，我把所有的JS代码都放到了<head>中标签，现在是函数 dramCircle()正在调用成功。
关于javascript - 剑道图点击添加圆圈，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46117758/