logo GoJS教程2020 我也要发布文档

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


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);
流程图控件GoJS教程:工具提示

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

您可以通过设置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);

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

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

HTML工具提示

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

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


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

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