我在构建图时使用shapeDefaults。content->text值应该引用节点的name属性。例如,如果节点对象是:
var data = [{
designation: "CEO",
name: "Mitchell Johnson",
manages: [{
designation: "Vice President",
name: "Smith Cooper",
manages: [{
designation: "Director",
name: "Andrew Walker"
}, {
designation: "Director",
name: "Robert Thompson"
}]
}, {
designation: "Vice President",
name: "Harris Jones",
manages: [{
designation: "Director",
name: "Edward Collins"
}, {
designation: "Director",
name: "Thomas Wang"
}]
}]
}];
这里content->text应该引用"name"属性并将其显示在中心。
确保将"shapeDefaults"添加到图表配置中:
shapeDefaults:
{
visual: visualTemplate
},
在函数visualTemplate中,添加您的标记方式,如:
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: dataItem.color
}));
g.append(new dataviz.diagram.TextBlock(
{
text: dataItem.name,
x: 5,
y: 20,
color: "#fff"
}));
}
如果你知道如何将文本居中,请告诉我。我正在寻找它:)
您还可以查看:http://demos.telerik.com/kendo-ui/diagram/index