格式化和对齐Gojs图表中的文本

时间:2018-07-19 09:36:45

标签: javascript html gojs

我们如何格式化第一个文本块(单词“成功”)到圆形的右侧,而第二个文本块也应出现在圆形的底部?

还附加了fiddle link

助人为乐

gojs节点模板

myDiagram.nodeTemplate =
$(go.Node, "Auto", {
    movable: false
  },
  $(go.Panel, "Vertical",
    $(go.TextBlock, {
        margin: 5,
        font: '14px "Open Sans", sans-serif'
      },
      new go.Binding("text", "status")),

    $(go.Panel, "Auto", {
        background: "white"
      },
      $(go.Shape, "Circle", {
          strokeWidth: 4,
          margin: go.Margin.parse("10 5 10 5"),
          height: 75,
          width: 75,
          cursor: "pointer"
        },
        new go.Binding("fill", "color"), new go.Binding("stroke", "strokeColor")
      ),

      $(go.Panel, "Vertical",
        $(go.Picture, {
          source: "https://msdnshared.blob.core.windows.net/media/2017/05/icon.png",
          background: "white",
          width: 25,
          height: 25
        })
      )
    ),
    $(go.TextBlock, {
        margin: 5,
        font: '14px "Open Sans", sans-serif'
      },
      new go.Binding("text", "name"))
  )
);

1 个答案:

答案 0 :(得分:1)

我对您的代码做了一些修改:

myDiagram.nodeTemplate =
  $(go.Node, "Spot",
    {
      locationObjectName: "ICON", locationSpot: go.Spot.Center,
      movable: false
    },
    $(go.Panel, "Auto",
      {
        name: "ICON", background: "white",
        portId: "", cursor: "pointer",
        fromSpot: new go.Spot(0.5, 1, 0, 20)
      },
      $(go.Shape, "Circle",
        { strokeWidth: 4, width: 75, height: 75, margin: 5 },
        new go.Binding("fill", "color"),
        new go.Binding("stroke", "strokeColor")),
      $(go.Picture, "https://msdnshared.blob.core.windows.net/media/2017/05/icon.png",
        { width: 25, height: 25, background: "white" })
    ),
    $(go.TextBlock,
      {
        alignment: go.Spot.Bottom, alignmentFocus: go.Spot.Top,
        margin: 5, font: '14px "Open Sans", sans-serif'
      },
      new go.Binding("text", "name")),
    $(go.TextBlock,
      {
        alignment: go.Spot.Right, alignmentFocus: go.Spot.Left,
        font: '14px "Open Sans", sans-serif'
      },
      new go.Binding("text", "status"))
  );

enter image description here