剑道UI图表-内容文本值



我在构建图时使用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

相关内容

  • 没有找到相关文章

最新更新