1
私は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>