Я реализовал диаграмму пользовательского интерфейса kendo с HierarchicalDataSource.Ниже приведен код и ссылка dojo https://dojo.telerik.com/arIlASAT.
Требуется динамическое соединение фигур при загрузке диаграммы.Я попытался дать connectionDataSource, но не работал, поэтому прокомментировал строку "//, connectionsDataSource: connectionsDataSource" в dojo.
var connections = [{
"FromShapeId": "3",
"ToShapeId": "7"
}, {
"FromShapeId": "2",
"ToShapeId": "6"
}];
var connectionsDataSource = {
data: connections,
schema: {
model: {
fields: {
from: {
from: "FromShapeId"
//type: "string"
},
to: {
from: "ToShapeId"
// type: "string"
}
// need a from shapeId field
// need a to shapeId field
}
}
}
};
Не уверен, что connectionsDataSource работает с иерархической диаграммой !!
Короче из приведенного изображения ожидаемое соединение должно происходить при загрузке диаграммы из "Ann Devon" => "Daniel Tonini"
полный код ниже:
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/diagram/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.3.911/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.911/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="diagram"></div>
<script>
var connections = [{
"FromShapeId": "3",
"ToShapeId": "7"
}, {
"FromShapeId": "2",
"ToShapeId": "6"
}];
var connectionsDataSource = {
data: connections,
schema: {
model: {
fields: {
from: {
from: "FromShapeId"
//type: "string"
},
to: {
from: "ToShapeId"
// type: "string"
}
// need a from shapeId field
// need a to shapeId field
}
}
}
};
var data = [{
id:1,
firstName: "Antonio",
lastName: "Moreno",
image: "antonio.jpg",
title: "Team Lead",
colorScheme: "#1696d3",
items: [{
id:2,
firstName: "Elizabeth",
image: "elizabeth.jpg",
lastName: "Brown",
title: "Design Lead",
colorScheme: "#ef6944",
items: [{
id:3,
firstName: "Ann",
lastName: "Devon",
image: "ann.jpg",
title: "UI Designer",
colorScheme: "#ef6944"
}]
}, {
id:4,
firstName: "Diego",
lastName: "Roel",
image: "diego.jpg",
title: "QA Engineer",
colorScheme: "#ee587b",
items: [{
id:5,
firstName: "Fran",
lastName: "Wilson",
image: "fran.jpg",
title: "QA Intern",
colorScheme: "#ee587b"
}]
}, {
id:6,
firstName: "Felipe",
lastName: "Izquiedro",
image: "felipe.jpg",
title: "Senior Developer",
colorScheme: "#75be16",
items: [{
id:7,
firstName: "Daniel",
lastName: "Tonini",
image: "daniel.jpg",
title: "Developer",
colorScheme: "#75be16"
}]
}]
}];
function visualTemplate(options) {
var dataviz = kendo.dataviz;
var g = new dataviz.diagram.Group();
var dataItem = options.dataItem;
g.append(new dataviz.diagram.Rectangle({
width: 210,
height: 75,
stroke: {
width: 0
},
fill: {
gradient: {
type: "linear",
stops: [{
color: dataItem.colorScheme,
offset: 0,
opacity: 0.5
}, {
color: dataItem.colorScheme,
offset: 1,
opacity: 1
}]
}
}
}));
g.append(new dataviz.diagram.TextBlock({
text: dataItem.firstName + " " + dataItem.lastName,
x: 85,
y: 20,
fill: "#fff"
}));
g.append(new dataviz.diagram.TextBlock({
text: dataItem.title,
x: 85,
y: 40,
fill: "#fff"
}));
g.append(new dataviz.diagram.Image({
source: "../content/dataviz/diagram/people/" + dataItem.image,
x: 3,
y: 3,
width: 68,
height: 68
}));
return g;
}
function createDiagram() {
$("#diagram").kendoDiagram({
dataSource: new kendo.data.HierarchicalDataSource({
data: data,
schema: {
model: {
children: "items"
}
}
}),
editable: {
rotate: false,
resize: false
},
selectable: true,
zoomRate: 0,
dataBound: function () {
var bbox = this.boundingBox();
this.wrapper.width(bbox.width + bbox.x + 50);
this.wrapper.height(bbox.height + bbox.y + 50);
this.resize();
},
layout: {
type: "tree",
subtype: "tipover",
horizontalSeparation: 150,
verticalSeparation: 20
},
shapeDefaults: {
editable: {
drag: false
},
visual: visualTemplate
},
connectionDefaults: {
//below is to delete the connections
editable: {
tools: [{
name: "delete"
}]
},
endCap: {
type: "ArrowEnd",
fill: "blue"
},
stroke: {
color: "#979797",
width: 2
}
}
,
shapes: {
editable: {
connect: false
}
}
//,connectionsDataSource: connectionsDataSource
});
var diagram = $("#diagram").getKendoDiagram();
diagram.bringIntoView(diagram.shapes);
}
$(document).ready(createDiagram);
</script>
</div>
</body>
</html>
Дайте мне знать, сталкивалось ли какое-либо тело с этим сценарием.спасибо
РЕДАКТИРОВАТЬ: попробовал другой пример с использованием dojo https://dojo.telerik.com/OYupExUq, но не смог получить соединения