代码之家 › 专栏 › 技术社区 › Pandiyan Cool

在gojs图表中格式化和对齐文本

gojs html javascript

0

Pandiyan Cool · 技术社区 · 6 年前

如何将第一个文本块(单词“success”)设置为形状圆的右侧,并且第二个文本块应显示在圆形状的底部?

附加 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 回复 | 直到 6 年前

1

Walter Northwoods 6 年前

我修改了你的代码:

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"))
  );