2017-09-08 36 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()正在成功調用。