Crear organigrama con JavaScript puro-JS-orgChart-2

Vista prévia

Descripción

Una biblioteca JavaScript multipropósito que le permite generar un organigrama altamente personalizable en su página web. Puede encontrar más ejemplos interactivos en el zip.

Funcionamiento

Cargue la biblioteca JavaScript JS-OrgChart-2. js en la página HTML.

<script src="path/to/js-orgchart-2.js"></script>

Cree un elemento vacío que servirá como contenedor para el organigrama.

<div id="orgchart"></div>

Crear params para el organigrama.

var chartParams = {


options: {




top: 12,




left: 12,




line: {





size: 2,





color: "#3388dd"




},




node: {





width: 128,





height: 128,





maxWidth: 128,





maxHeight: 128,





template: "<div id=\"{id}\"><img class=\"node-image\" src=\"images/avatar/{imgAvatar}\" /></div>"




}


},


event: {




node: {





onProcess: function(node, nodes) {







console.log("node.onProcess");





},





onClick: function() {







console.log("node.onClick");





},





onMouseMove: function() {







console.log("node.onMouseMove");





},





onMouseOver: function() {







console.log("node.onMouseOver");





},





onMouseOut: function() {







console.log("node.onMouseOut");





}




},




onCreate: function() {





console.log("onCreate");




},




onError: null,




onFinish: function() {





console.log("onFinish");




}


},


nodes: pOrgNodes
};

Cree OrgChartV2.

var pChart = new OrgChartV2(chartParams);

Inicialización.

pChart.render();