Kendo UI 图 - 内容文本值

【问题标题】：Kendo UI Diagram - content text valuesKendo UI 图 - 内容文本值
【发布时间】：2014-09-21 10:58:49
【问题描述】：

我在构建图表时使用 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"
              }]
            }]
           }];

这里的内容 -> 文本应该引用'name'属性并显示在中心。

【问题讨论】：

标签： kendo-ui kendo-dataviz

【解决方案1】：

确保将“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

【讨论】：