GoJs中的提示框--toolTip

沅芷湘兰
467 阅读2分钟

前言

在前面的文章中咱们提到了gojs的绘图模板，布局和交互方法。利用这些我们可以实现一个完整的可视化图形，并且可以根据交互事件来拓展或者修改图形的显示。在go.TextBlock一讲中提到。如果文字过多，为保证图形的显示，我们不能让节点过大，因此处理为显示三个点。但是如果我们需要看完整的信息又需要怎么处理呢。这就用到了gojs提示框(toolTip)。

toolTip的使用

tootip是鼠标在节点或者节点元素上悬停之后展示出来的提示信息，因此其配置也可以根据new go.Binding来获取到整个节点的信息。

整个节点的提示信息

给整个节点增加提示信息的时候，只需要在go.Node的同级加上toolTip就可以了。示例如下

this.myDiagram.nodeTemplate = $$(
  go.Node,
  "Auto",
  $$(go.Shape,"RoundedRectangle",
    {
      strokeWidth: 1,
      parameter1: 3,
      fill:"transparent",
      stroke:"#67B73C",
    }),
      $$(go.TextBlock,{overflow: go.TextBlock.OverflowEllipsis,maxLines: 2,width:100,margin:30},
      new go.Binding("text", "text")
    ),
    {
        toolTip:  
        $$("ToolTip",
        $$(go.TextBlock, { margin: 5 },
            new go.Binding("text", "text"))
        )  
    }
)

image.png

可以看出整个节点的提示信息是鼠标放到节点的任意位置，提示信息都会出现。这里有个需要注意的点就是我们在设置整个节点的提示信息的时候一般会设置go.Node为auto，进而设置节点的形状。但是需要注意如果为了设置节点空白部分的背景颜色fill为null。从而保证节点的颜色和背景画布颜色保持一致，如果设置为null的话，节点内部空白部分就是画布.也就是说此时的画布是镂空的。因此想要触发提示，并且不想有背景颜色的话可以设置fill为transparent。

节点内元素的提示信息

既然有整个节点的提示信息，那么就会有节点内部的元素的部分提示信息。比如，节点内存在各种svg图标，我们点击不同的svg图标可以触发不同的事件行为。这个时候就需要给每个svg图标都添加一个提示信息，这个时候就可以在对应的需要添加的元素同级添加就行了。我们以两段文字为例代码如下

this.myDiagram.nodeTemplate = $$(
  go.Node,
  "Auto",
  $$(go.Shape,"RoundedRectangle",
    {
      desiredSize: new go.Size(100, 200),
      strokeWidth: 1,
      parameter1: 3,
      fill:"transparent",
      stroke:"#67B73C",
    }),
    $$(go.Panel,"Vertical",
        $$(go.TextBlock,{overflow: go.TextBlock.OverflowEllipsis,maxLines: 2,width:100,margin:30},
        new go.Binding("text", "text"),
        {
            toolTip:  
            $$("ToolTip",
            $$(go.TextBlock, { margin: 5 },
                new go.Binding("text", "text"))
            )  
        }
        ),
        $$(go.TextBlock,{overflow: go.TextBlock.OverflowEllipsis,maxLines: 2,width:100,margin:30},
        new go.Binding("text", "text1"),
        {
            toolTip:  
            $$("ToolTip",
            $$(go.TextBlock, { margin: 5 },
                new go.Binding("text", "text1"))
            )  
        }
        ),
    ),
)

image.png

image.png 由上图可以看出，把鼠标放到第一行文字和第二行文字的时候分别提示的是第一行文字的信息和第二行文字的信息，如果把鼠标放到文字之外的空白地方，则不提示信息。因此可以根据需要给节点内不同的元素绑定提示信息。

toolTip提示信息的位置

如果没有设置位置信息，默认的情况下提示信息是根据鼠标的位置做了一个相对位置的偏移，但是有些需求则需要修改提示信息的位置，因此可以结合前文提到的go.Spot(点布局)来修改一下提示信息的位置，示例如下

{
    toolTip:                       
    $$(go.Adornment, "Spot",      
        { background: "transparent" },  
        $$(go.Placeholder, { padding: 5 }),
        $$(go.TextBlock,
        { alignment: go.Spot.Top, stroke: "#67B73C",margin:10, text:'上方' }),
        $$(go.TextBlock, 
        { alignment: go.Spot.Bottom, stroke: "#67B73C",margin:10,text:'下方'  }),
        $$(go.TextBlock,
        { alignment: go.Spot.Left, stroke: "#67B73C",margin:10, text:'左方' }),
        $$(go.TextBlock, 
        { alignment: go.Spot.Right, stroke: "#67B73C",margin:10,text:'右方'  })
    )
}

image.png

可以看出通过调整位置可以把提示信息修改到不同的位置，然后可以根据自己的需求再进行其他的调整，实现自己的需求。

总结

由于可视化图形的特殊性，为了展示出更多的信息.但是又不能缩减每一个节点携带的信息，只能对节点信息进行一个隐藏。在使用的时候通过交互行为来显示完整的信息，因为tooltip也可以使用其他的绘图模板，因为提示信息的样式也可以根据自己的需求进行定制。

avatar
文章
阅读
粉丝