Se você já trabalhou com bibliotecas de gráficos antes, pode estar familiarizado com alguns populares como D3.js, Chart.js ou ApexCharts. Essas bibliotecas nos permitem desenhar gráficos básicos de maneira programática como gráficos de barras, gráficos de linhas e histogramas, bem como gráficos avançados gráficos como gráficos de dispersão. No entanto, uma função comum para a qual essas bibliotecas não têm ou fornecem suporte mínimo é a criação de fluxogramas.
Neste tutorial, exploraremos GoJS, uma biblioteca JavaScript para a construção de gráficos interativos , criando fluxogramas simples e complexos. Vamos começar!
Começar
Nosso exemplo usa um CodePen com GoJS; você pode criar o seu próprio para acompanhar.
Importando a biblioteca
Primeiro, vamos importar a biblioteca GoJS para o nosso CodePen. Clique no botão Configurações e vá para a seção JS . Em Adicionar scripts/canetas externos , pesquise GoJS e adicione a biblioteca CDNjs para GoJS , que aparece como uma sugestão:
Configurando o playground
Agora, obteremos um placeholder, ou playground, para traçar nossos gráficos. Na seção HTML , crie um div:
Vamos fornecer ao div altura e largura iguais para a janela de visualização:
#diagramDiv {largura: 100vw; altura: 100vh; cor de fundo: # dae4e4; }
Agora, devemos ver uma área cinza onde podemos começar a traçar nosso gráfico, que escreveremos no painel JavaScript da CodePen.
Crie um gráfico básico gráfico
Com a biblioteca importada, vamos criar um gráfico básico em nosso CodePen. Primeiro, obteremos uma referência à função da biblioteca e a armazenaremos na variável $, semelhante a acessar a biblioteca jQuery usando o símbolo $:
var $=go.GraphObject.make;
A seguir, inicializaremos um diagrama na mesma área que definimos como playground na seção anterior.
var myDiagram=$ (go.Diagram,”diagramDiv”);
O código acima inicializa um novo diagrama GoJS no div. Seu ID é diagramDiv. Agora, inicializaremos um modelo GoJS básico com três elementos e o definiremos como o modelo de diagrama:
myDiagram.model=new go.Model ([{key:”Bob”}, {key:”Alice”} , {chave:”Emma”}]);
Um diagrama mínimo aparecerá no div, semelhante à imagem abaixo:
Elementos GoJS
Agora que criamos um diagrama básico, vamos dar uma olhada mais de perto nos fundamentos do GoJS para que possamos implementar gráficos mais complexos.
Diagrama
Um Diagrama refere-se ao gráfico completo que é plotado usando GoJS. Um diagrama possui modelos e nós. Também pode usar modelos de nó, que definem como o modelo deve ser renderizado no diagrama.
Nó
Um nó é uma entidade que representa um único elemento renderizado no diagrama. Cada item no modelo se traduz aproximadamente em um nó no diagrama. Como unidades independentes dentro de um diagrama, nós são o que vemos e com os quais interagimos.
No GoJS, temos os seguintes quatro tipos de nós:
Forma: exibe formas geométricas personalizadas ou predefinidas e adiciona estilização como cor e textura TextBlock: mostra o texto na Figura do Diagrama: exibe uma imagem em um Painel do Diagrama: organiza outros Nós em arranjos específicos
Um Nó também pode ter um nó filho dentro dele, por exemplo, um TextBlock dentro de uma Forma.
Modelo
Um modelo é a representação de dados do gráfico traçado no diagrama. Em nosso exemplo anterior, o modelo consistia em apenas três elementos. No entanto, em cenários do mundo real, a maioria dos gráficos seria muito mais complexa com mais nós, cada um tendo várias chaves e formando relacionamentos complexos entre si:
Criando nós no GoJS
Sempre que criamos um gráfico, na verdade estamos criando um diagrama e exibindo os nós nesse diagrama. Temos algumas maneiras diferentes de criar nós no GoJS.
Por exemplo, podemos usar as funções go.Node, go.Shape e go.TextBlock separadamente, que retornarão objetos do mesmo tipo. Em seguida, podemos adicionar as propriedades que esperamos que esses nós tenham:
var shape=new go.Shape ();//cria uma forma shape.figure=”RoundedRectangle”;//define a geometria shape.fill=”red”;//define a cor var node=new go.Node (go.Panel.Auto);//cria um nó node.add (shape);//adicione a forma ao nó
No entanto, a vinculação entre os nós dessa maneira é prolixa, fazendo com que o diagrama fique muito grande.
go.GraphObject.make
GoJS define o método GraphObject.make, uma função construtora especial que podemos usar para criar qualquer tipo de Node, fornecer as propriedades de Node no construtor e fornecer os Nodes internos como argumentos aninhados para criar uma hierarquia de Node.
Vamos fazer uma chamada para o método GraphObject.make:
go.GraphObject.make (Type_of_node, Node_properties, Node_children)
Agora, vamos adicionar uma referência ao método GraphObject.make no símbolo $ para melhorar a legibilidade do código. Podemos simplificar o código acima no seguinte:
var $=go.GraphObject.make;//obter a referência para fazer o método diagram.add ($ (go.Node, go.Panel.Auto,//criar um go.Node $ (go.Shape,//criar um go.Shape dentro dele {figura:”RoundedRectangle”,//geometria do preenchimento:”red”}),));
nodeTemplate
Podemos simplificar ainda mais nosso código com o método nodeTemplate, que usaremos para definir a aparência de todos os nós em nosso gráfico.
Vamos criar um nodeTemplate com os nós que definimos na seção anterior:
diagram.nodeTemplate (//a definição de como cada nó deve se parecer);
Em seguida, simplesmente definimos o modelo e GoJS aplicará o mesmo modelo a todos os nós no diagrama. GoJS procura as chaves mencionadas em go.Binding e as substitui pelos valores correspondentes do modelo definido. Vamos ver isso em ação!
Crie um fluxograma no GoJS
Agora que entendemos como o GoJS funciona, vamos construir um gráfico complexo. Criaremos um gráfico em árvore que classifica todas as posições em uma empresa.
Para acompanhar, aqui está nosso CodePen .
Veja a Caneta
de kapeel kokane ( @kokanek )
em CodePen .
Criando o esqueleto
Primeiro, obteremos a referência ao método GraphObject.make, em seguida, criaremos um diagrama e o anexaremos à classe que definimos à parte:
var $=go.GraphObject.make; var myDiagram=$ (go.Diagram,”diagramDiv”);
A seguir, usaremos o método nodeTemplate para definir a aparência de cada nó no diagrama. Exibiremos o cargo junto com o nome do funcionário.
Vamos criar um nodeTemplate com dois elementos TextBlock:
myDiagram.nodeTemplate=$ (go.Node,”Horizontal”, {background:”tomate”}, $ (go.TextBlock, {text:”a Text Block”, background:”yellow”, margin: 12, font:”bold 16px sans-serif”}, novo go.Binding (“text”,”title”)), $ (go.TextBlock,”Texto padrão”, {margin: 12, stroke:”white”, font:”bold 16px sans-serif”}, novo go.Binding (“text”,”name”)));
Nossos dois elementos TextBlock estão em uma vinculação com as chaves de nome e título do modelo:
myDiagram.model=new go.Model ([{name:”Bob”, title:”CEO”}, {nome:”Alice”, cargo:”Dept Head”}, {nome:”Emma”, cargo:”CFO”}]);
Quando renderizarmos nosso diagrama, ele se parecerá com a imagem abaixo:
Definindo links entre nós
Com nossos nós criados, o próximo A etapa é definir links entre eles adicionando uma chave e um atributo pai no modelo. Assim que o link for especificado, GoJS desenhará os links da chave pai para a chave filha para nós:
myDiagram.model=new go.TreeModel ([{nome:”Bob”, título:”CEO”, chave:”1″}, {name:”Alice”, title:”Dept Head”, key:”2″, parent:”1″}, {name:”Emma”, title:”CFO”, key:”3″, pai:”1″}]);
Observe que agora estamos criando um go.TreeModel em vez de go.Model. Agora, quando rendermos nosso diagrama, ele se parecerá com a imagem abaixo:
Para organizar nosso diagrama em uma hierarquia adequada, podemos fornecer uma propriedade de layout, que colocará os nós de maneira nível a nível:
var myDiagram=$ (go.Diagram,”diagramDiv”, {layout: $ (go.TreeLayout, {angle: 90, layerSpacing: 40})});
Agora, nosso diagrama se parece com a imagem abaixo:
Vamos adicionar mais alguns funcionários ao nosso modelo, adicionando as chaves e pais adequados:
Lembre-se de que esta não é uma imagem renderizada. É um gráfico totalmente interativo, o que significa que podemos clicar nos nós, arrastá-los e soltá-los e muito mais!
Conclusão
Agora, você sabe como criar um fluxograma complexo em JavaScript usando GoJS. Neste tutorial, cobrimos a instalação da biblioteca GoJS, a configuração de nós e, finalmente, a definição dos links entre os nós.
Com tantas opções de configuração e personalizações possíveis, o GoJS é definitivamente uma das bibliotecas mais completas do mercado lá. Neste tutorial, nós apenas arranhamos a superfície.
Outros layouts além do layout em árvore incluem diagramas direcionados, circulares e em camadas. GoJS também inclui outros recursos como pincéis e animação que irão aprimorar a aparência de seus gráficos.
