Question

我在构造图表时使用shapeDefaults。内容 - ＆gt;文本值应该引用节点的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"
              }]
            }]
           }];

此处内容 - ＆gt;文字应参考＆＃39; name＆＃39;属性并将其显示在中心。

Answer 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

Kendo UI Diagram - 内容文本值

1 个答案: