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

Question

我们如何将第一个文本块（单词 'success'）格式化为圆形的右侧，并且第二个文本块应出现在圆形的底部？

帮助很大

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

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

Answer 2

对每个角使用此语法：

$(go.TextBlock, "0,0",     { alignment: new go.Spot(0, 0) }),
$(go.TextBlock, "0.5,0",   { alignment: new go.Spot(0.5, 0) }),
$(go.TextBlock, "1,0",     { alignment: new go.Spot(1, 0) }),
$(go.TextBlock, "0,0.5",   { alignment: new go.Spot(0, 0.5) }),
$(go.TextBlock, "0.5,0.5", { alignment: new go.Spot(0.5, 0.5) }),
$(go.TextBlock, "1,0.5",   { alignment: new go.Spot(1, 0.5) }),
$(go.TextBlock, "0,1",     { alignment: new go.Spot(0, 1) }),
$(go.TextBlock, "0.5,1",   { alignment: new go.Spot(0.5, 1) }),
$(go.TextBlock, "1,1",     { alignment: new go.Spot(1, 1) }),

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

Format and align text in gojs chart

html

javascript

gojs