流程图控件GoJS教程：工具提示

GoJS提供了一种为任何对象或图表背景创建自定义工具提示的方法。工具提示是装饰物，当鼠标悬停在设置了GraphObject.toolTip的对象上时显示。工具提示零件与零件本身绑定到相同的数据。

GoJS是一款功能强大，快速且轻量级的流程图控件，可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图，且极大地简化您的JavaScript / Canvas 程序。

GoJS最新试用版

通常，将工具提示实现为包含TextBlock的“ ToolTip”面板或TextBlocks面板和其他对象。每个“工具提示”仅仅是一个“自动”面板装饰品被遮蔽，并且其中所述边界是矩形形状具有浅灰色填充。但是，您可以将工具提示实现为任何任意复杂的装饰。

您可以在Buttons.js上看到“ ToolTip”构建器的定义方式 。

在此示例中，每个节点都将其GraphObject.toolTip属性设置为Part，该部件通过常规数据绑定显示data.color属性。通过设置Diagram.toolTip，该图可获得其自己的工具提示。

  diagram.nodeTemplate =    $(go.Node, "Auto",      $(go.Shape, "RoundedRectangle",        { fill: "white" },        new go.Binding("fill", "color")),      $(go.TextBlock, { margin: 5 },        new go.Binding("text", "key")),      {        toolTip:  // define a tooltip for each node that displays the color as text          $("ToolTip",            $(go.TextBlock, { margin: 4 },              new go.Binding("text", "color"))          )  // end of Adornment      }    );  // a function that produces the content of the diagram tooltip  function diagramInfo(model) {    return "Model:n" + model.nodeDataArray.length + " nodes, " +                        model.linkDataArray.length + " links";  }  // provide a tooltip for the background of the Diagram, when not over any Part  diagram.toolTip =    $("ToolTip",      $(go.TextBlock, { margin: 4 },        // use a converter to display information about the diagram model        new go.Binding("text", "", diagramInfo))    );  var nodeDataArray = [    { key: "Alpha", color: "lightblue" },    { key: "Beta", color: "pink" }  ];  var linkDataArray = [    { from: "Alpha", to: "Beta" }  ];  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

尝试将鼠标暂停在每个节点上或图的背景中。如果复制某些部分，您将看到该图的工具提示显示有关该图的较新信息。

您可以通过设置ToolManager.hoverDelay来更改鼠标在工具提示出现之前必须静止不动的时间。例如，初始化Diagram时，“toolManager.hoverDelay”: 600将延迟更改为一秒的6/10。

您可以通过设置ToolManager.toolTipDuration来更改工具提示保持可见的时间。例如，“toolManager.toolTipDuration”: 10000将可见时间更改为10秒。

定位

有两种方法可以自定义工具提示相对于装饰的GraphObject的位置。一种方法是重写ToolManager.positionToolTip。另一种方法是使工具提示装饰物包含占位符。占位符的位置和装饰对象的位置和位置相同。使用占位符创建工具提示时，请勿使用预定义的“工具提示”构建器，因为它会引入通常用作“自动”面板边框的额外形状。

  // this is a normal Node template that also has a toolTip defined for it  diagram.nodeTemplate =    $(go.Node, "Auto",      $(go.Shape, "RoundedRectangle",        { fill: "white" },        new go.Binding("fill", "color")),      $(go.TextBlock, { margin: 5 },        new go.Binding("text", "key")),      {        toolTip:                       // define a tooltip for each node          $(go.Adornment, "Spot",      // that has several labels around it            { background: "transparent" },  // avoid hiding tooltip when mouse moves            $(go.Placeholder, { padding: 5 }),            $(go.TextBlock,              { alignment: go.Spot.Top, alignmentFocus: go.Spot.Bottom, stroke: "red" },              new go.Binding("text", "key", function(s) { return "key: " + s; })),            $(go.TextBlock, "Bottom",              { alignment: go.Spot.Bottom, alignmentFocus: go.Spot.Top, stroke: "red" },              new go.Binding("text", "color", function(s) { return "color: " + s; }))          )  // end Adornment      }    );  var nodeDataArray = [    { key: "Alpha", color: "lightyellow" },    { key: "Beta", color: "orange" }  ];  var linkDataArray = [    { from: "Alpha", to: "Beta" }  ];  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

请注意实现工具提示的装饰物如何使用“透明”背景，以便在鼠标移动时不会自动删除工具提示。

HTML工具提示

可以使用HTML而不是使用HTMLInfo类定义Adornment来定义自定义工具提示。该数据可视化样品示出了这样的工具提示。有关更多讨论，请参见HTML交互。

与使用默认的GoJS “ ToolTip”和GraphObjects 相比，HTML工具提示需要花费更多的精力来实现。但是，您将具有HTML / CSS / JavaScript的全部功能来显示所需的内容。

温馨提示：疫情期间返岗上班需戴口罩、勤洗手、常通风，做好防护措施！

想要购买GoJS正版授权的朋友可以咨询官方客服

标签：