| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
jopen
9年前发布

JavaScript图表图形框架 -- GOJS简介

gojs是一个能够让我们很容易的实现基于html5浏览器绘制具有交互性的图形图表的JavaScript框架。 gojs采用了面向对象的编程模式。以图形对象表示绘图模板。以用普通js对象存储数据作为数据模型,然后赋值给图形对象的属性作为数据绑定的模式。 gojs同样提供了大量工具类来代表我们的交互行为。我们需要做的就是创建图形对象、构建数据模型、设置属性、绑定数据模型、使用工具类添加行为即可创建 出具有丰富交互性能的各种图表。

一个简单的gojs图表

下面的代码定义了一个node模板和数据模型,并它们构建了一个简单的图表:

// For conciseness. See the "Building Parts" intro page for more      var $ = go.GraphObject.make;        // the node template describes how each Node should be constructed      diagram.nodeTemplate =        $(go.Node, "Auto",  // the Shape automatically fits around the TextBlock          $(go.Shape, "RoundedRectangle",            // bind Shape.fill to Node.data.color            new go.Binding("fill", "color")),          $(go.TextBlock,            { margin: 3 },  // some room around the text            // bind TextBlock.text to Node.data.key            new go.Binding("text", "key"))        );        // the Model holds only the essential information describing the diagram      diagram.model = new go.GraphLinksModel(      [ // a JavaScript Array of JavaScript objects, one per node        { key: "Alpha", color: "lightblue" },        { key: "Beta", color: "orange" },        { key: "Gamma", color: "lightgreen" },        { key: "Delta", color: "pink" }      ],      [ // a JavaScript Array of JavaScript objects, one per link        { from: "Alpha", to: "Beta" },        { from: "Alpha", to: "Gamma" },        { from: "Beta", to: "Beta" },        { from: "Gamma", to: "Delta" },        { from: "Delta", to: "Alpha" }      ]);        diagram.initialContentAlignment = go.Spot.Center;      // enable Ctrl-Z to undo and Ctrl-Y to redo      diagram.undoManager.isEnabled = true;

结果:
JavaScript图表图形框架 -- GOJS简介

虽然上面展示的是图片,但是实际上我们可以在这个图表上用鼠标中键滚动、选中、删除、重做、撤销等等交互。

gojs的基本概念

上面的示例是让我们先在感官上认知一下gojs的产出物,下面我们来阐述一下gojs的基本概念。

gojs绘制的图表(Diagram)具有两个最基本的元素,就是点和线(Node和Link),并且他们可以自由组合组成一个组(Group)。所有的元素都处在图层(Layer)上,并且可以对它们进行布局(Layout)。

每个Diagram都是通过数据模型(Model)来填充和确定Node的信息和Link的所属关系的。并且我们只需要创建好Node和Link的模板以及数据模型,其他的是事情都交给gojs去处理。它会通过Model.nodeDataArray方法和GraphLinksModel.linkDataArray方法自动加载模型并构建元素。

每一个Node和Link都是通过模板来描述他们的文本、形状、颜色等信息以及交互行为。每个模板其实就是一个面板(Panel)(你可以将各种元素自由组合在它里面,也可以在它里面添加各种交互行为),比如说将TextBlock、Shape、Picture等元素添加到这个Panel中,鼠标进入离开的交互行为也可以添加到Panel中,那么这个Panel就是一个模板。

每个Node的位置可以使用Diagram.layout或Group.layout进行初始化设置,也可以基于交互行为进行拖拽。

gojs里的工具类可以为Diagram添加鼠标、键盘事件。一般情况下Diagram都默认设置了几种交互行为,比如说拖拽、连线。我们也可以通过ToolManager对象来管理工具类,或者说来管理交互行为,比如说可以停止某些交互,或开启某些交互等。

每个Diagram同时也包含CommandHandler对象,它的作用是添加一些键盘命令,比如点Delete键删除元素,Ctrl+C复制、Ctrl+V粘贴、Ctrl+Z撤销等。但是CommandHandler也是被ToolManager管理的。

Diagram也提供通过鼠标中键滚动视图、放大缩小视图。

gojs还提供了图表的预览视图(Overview),用于了解大规模图表的概况,同时还提供了组件管理面板(Palette),用于管理创建的组件,并且支持将组件拖拽到Diagram中。

在Diagram中,你可以选中Node或者Link,你会发现他们有少许的变化,比如在Node周围会增加选中框,选中Link会变色等。这些都是由Adornment对象控制的,你还可以用它来增加提示框、右键菜单等。

Diagram默认的交互行为

  • 选中Node或者Link,会出现蓝色选中框,Link也会变为蓝色。
  • 使用Ctrl+鼠标左键可以选中多个元素。
  • 在Panel中点击鼠标左键移动鼠标可以移动所有元素。
  • 使用Ctrl+A可以选中所有元素。
  • 选中元素,用鼠标可以拖动元素。
  • 使用Ctrl+C/Ctrl+V可以复制粘贴元素。
  • 使用Delete键可以删除元素。
  • 选中多个元素,然后使用Ctrl+G可以将这些选中的元素组合成一个组。
  • 使用Ctrl+Shift+G可以拆散组。
  • 当元素超出Diagram时,可自动出现滚动条。
  • 用鼠标拖拽Node边缘可以与其他Node进行连线。
  • 选中Link,可以重新选择目标Node,即可以重新连线。

创建一个Diagram

每个Diagram都需要依托与一个HTML的DIV元素,虽然由gojs接管了这个DIV,但是DIV本身的属性依然可以由我们通过CSS设置,比如位置、高宽等。gojs实际上是在DIV中创建了一个Canvas元素,Canvas的高宽自动适配DIV的高宽。

<!-- The DIV for a Diagram needs an explicit size or else we won't see anything.       In this case we also add a border to help see the edges. -->      <div id="myDiagramDiv" style="border: solid 1px blue; width:400px; height:150px"></div>

当然,当你准备开始创建Diagram前,首先要导入gojs的文件。gojs的文件分为Develop(gojs-debug.js)和Product(gojs.js)两种,前者是供开发人员使用的,因为它包含了一些用于调试的代码,后者用于正式发布,速度较快。gojs不依赖与任何JavaScript框架,所以它可以与任何JavaScript框架一起使用,而不会产生冲突。
<!-- Include the GoJS library. -->      <script src="gojs.js"></script>

下面就可以使用gojs将上述的DIV构建为一个Diagram了,这里需要注意的是,使用gojs的api时,都要使用前缀go.。
<!-- Create the Diagram in the DIV element using JavaScript. -->      <!-- The "go" object is the "namespace" that holds all of the GoJS types. -->      <script>      var diagram = new go.Diagram("myDiagramDiv");      diagram.model = new go.GraphLinksModel(          [{ key: "Hello" },   // two node data, in an Array          { key: "World!" }],          [{ from: "Hello", to: "World!"}]  // one link, in an Array      );      </script>

JavaScript图表图形框架 -- GOJS简介

来自:http://www.devtalking.com/articles/gojs-simple-diagram/

 本文由用户 jopen 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
 转载本站原创文章,请注明出处,并保留原始链接、图片水印。
 本站是一个以用户分享为主的开源技术平台,欢迎各类分享!
 本文地址:https://www.open-open.com/lib/view/open1435023502544.html
GOJS 图表/报表制作