GoJS流程图控件如何使用javascript为图形对象添加提示信息

作者:控件中国网   出处:控件中国网   2015-06-09 15:06:39   阅读:100

GoJS是一款完全基于JavaScript的流程图控件,开发人员可以使用该产品创建交互式地流程图,GoJS支持图形模板和数据绑定,支持自定义对象的外观和行为。完全的跨平台和跨浏览器,下面简单介绍如何使用JavaScript为图形对象创建提示信息(ToolTip):

GoJS为任何对象提供了创建自定义提示信息的方法,在节点都有 GraphObject.toolTip属性,可以通过该属性来设置节点提示信息,对于图形则通过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
          $(go.Adornment, "Auto",
            $(go.Shape, { fill: "#FFFFCC" }),
            $(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 =
    $(go.Adornment, "Auto",
      $(go.Shape, { fill: "#CCFFCC" }),
      $(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);

Copyright© 2006-2015 ComponentCN.com all rights reserved.重庆磐岩科技有限公司(控件中国网) 版权所有 渝ICP备12000264号 法律顾问:元炳律师事务所
客服软件
live chat