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

---

GoJS是一款功能強大，快速且輕量級的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創(chuàng)建流程圖，且極大地簡化您的JavaScript / Canvas 程序。

點擊下載GoJS最新試用版

通常，將工具提示實現(xiàn)為包含TextBlock的“ ToolTip”面板或TextBlocks面板和其他對象。每個“工具提示”僅僅是一個“自動”面板裝飾品被遮蔽，并且其中所述邊界是矩形形狀具有淺灰色填充。但是，您可以將工具提示實現(xiàn)為任何任意復(fù)雜的裝飾。

您可以在Buttons.js上看到“ ToolTip”構(gòu)建器的定義方式 。

在此示例中，每個節(jié)點都將其GraphObject.toolTip屬性設(shè)置為Part，該部件通過常規(guī)數(shù)據(jù)綁定顯示data.color屬性。通過設(shè)置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);

嘗試將鼠標(biāo)暫停在每個節(jié)點上或圖的背景中。如果復(fù)制某些部分，您將看到該圖的工具提示顯示有關(guān)該圖的較新信息。

您可以通過設(shè)置ToolManager.hoverDelay來更改鼠標(biāo)在工具提示出現(xiàn)之前必須靜止不動的時間。例如，初始化Diagram時，"toolManager.hoverDelay": 600將延遲更改為一秒的6/10。

您可以通過設(shè)置ToolManager.toolTipDuration來更改工具提示保持可見的時間。例如，"toolManager.toolTipDuration": 10000將可見時間更改為10秒。

定位

有兩種方法可以自定義工具提示相對于裝飾的GraphObject的位置。一種方法是重寫ToolManager.positionToolTip。另一種方法是使工具提示裝飾物包含占位符。占位符的位置和裝飾對象的位置和位置相同。使用占位符創(chuàng)建工具提示時，請勿使用預(yù)定義的“工具提示”構(gòu)建器，因為它會引入通常用作“自動”面板邊框的額外形狀。

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

請注意實現(xiàn)工具提示的裝飾物如何使用“透明”背景，以便在鼠標(biāo)移動時不會自動刪除工具提示。

HTML工具提示

可以使用HTML而不是使用HTMLInfo類定義Adornment來定義自定義工具提示。該數(shù)據(jù)可視化樣品示出了這樣的工具提示。有關(guān)更多討論，請參見HTML交互。

與使用默認(rèn)的GoJS “ ToolTip”和GraphObjects 相比，HTML工具提示需要花費更多的精力來實現(xiàn)。但是，您將具有HTML / CSS / JavaScript的全部功能來顯示所需的內(nèi)容。

---

溫馨提示：疫情期間返崗上班需戴口罩、勤洗手、常通風(fēng)，做好防護措施！

想要購買GoJS正版授權(quán)的朋友可以咨詢慧都官方客服