Question

我正在尝试在html按钮上单击绘制圆形图（更喜欢它在kendo图工具栏上也没有工作），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>

Answer 1

我认为问题可能正在发生，因为您可能已将JS代码放在HTML之后。即<head>标签结束后。这可能会导致问题。

在这个工作DEMO中，我已将所有JS代码放入dramCircle()标记中，现在成功调用了函数client.Credentials = new NetworkCredential("apikey", "<Your API Key which statats with SG.*>");。

kendo图在点击上添加圈子

1 个答案: