gojs的简单运用和节点内容多样式渲染

前言

本文记录了我在日常工作中使用gojs实现的一些业务功能，在这里做个简单记录。话不多说看效果

QQ2025114-113512-HD

什么是 GoJs？

GoJs 是一个 JavaScript 和 typescript 库，用于构建交互式图表，可以轻易的实现日常开发中所需要的各种示意图、结构图、组织图、流程图、状态图、思维导图、树状图等。

快速入门（GoJs入门示例网站）

这里只做简单示例，想了解更详细的可以去示例网站查阅

<template>
  <!-- 图形的容器 div 需要明确指定大小，否则无法显示 -->
  <div id="diagram" style="width:50%; height:50%; background-color: #DAE4E4;"></div>
</template>

import go from 'gojs'
// 获取 gojs 的方法
const $ = go.GraphObject.make;

// 初始化gojs
initGoJs() {
  // 将 gojs 挂载到 div 上 ,canvas 的大小由 div 的宽高决定
  this.diagram =
    $(go.Diagram, "diagram",
      {
        "undoManager.isEnabled": true
      });

  const myModel = $(go.Model);
  myModel.nodeDataArray = [
    { key: "Alpha" },
    { key: "Beta" },
    { key: "Gamma" }
  ];
  this.diagram.model = myModel;
}

小结：用法相当于我们常用的echars，在页面中创建一个div，明确指定大小作为一个画布

同一节点对文字不同颜色渲染

在节点和组里面的内容后面拼接了一个等级的字段，实现逻辑是用两个TextBlock，分开渲染

节点的渲染方法【水平布局，做两部分渲染】

 $go(
     go.Panel,
     "Auto",
     $go(
       go.Panel,
       "Horizontal", // 使用水平布局
       //第一部分渲染
       $go(
         go.TextBlock,
         {
           margin:  new go.Margin(8, 1, 8, 1),//节点边距
           editable: false
         }, 
         new go.Binding("text", "text").makeTwoWay(),//绑定的字段内容
         new go.Binding("stroke", "#048F95"),//文字颜色
         new go.Binding("font", "10pt Sans-Serif"),//文字大小
       ),
       //第二部分渲染
       $go(
         go.TextBlock,
         {
           margin: new go.Margin(8, 1, 8, 0),
           editable: false,
         },
         new go.Binding("text", "text2").makeTwoWay(),//绑定的字段内容
         new go.Binding("font", "10pt Sans-Serif"),//文字大小
		 new go.Binding("stroke", "red")//文字颜色
 )

组的渲染【水平布局，做两部分渲染】

主要解决的是文本显示的文本位置情况，所以TextBlock要放到同一个Panel中设置水平布局

$go(
  go.Panel,
  "Auto",
  $go(
    go.Panel,
    "Horizontal",//水平布局
    {
      alignment: go.Spot.TopLeft,
      alignmentFocus: new go.Spot(0, 0, 14, 4)
    },
     //第一部分
    $go(
      go.TextBlock,
      new go.Binding("font", "fontSize"),//这种写法是绑定变量，也可以写死
      {
        alignment: go.Spot.TopLeft,//文本定位在父级的左上角部分
        alignmentFocus: new go.Spot(0, 0, 14, 4),
        font: "15pt Sans-Serif"
      },
      new go.Binding("text", "text").makeTwoWay()//这种写法是绑定变量，也可以写死
      {
    ),
    //第二部分
    $go(
      go.TextBlock,
      new go.Binding("font", "fontSize"),//这种写法是绑定变量，也可以写死 15pt Sans-Serif
      {
        editable: false,//不允许修改
        alignment: go.Spot.TopLeft,
      },
      // 绑定等级
      new go.Binding("text", "text2").makeTwoWay(),//绑定第二文本内容
      new go.Binding("stroke", "red")//绑定第二部分颜色
  )
)

总结

这只是对昨天的问题做个小总结，总体代码很多就不全部贴出来了。GoJs还是很好玩的，用的上的可以玩起来。