Canvas-OrgChart

使用 canvas 绘制组织结构图.

Installation

Install with npm

$ npm install canvas-orgchart

Usage

Instantiation Statement

<canvas id="canvas"></canvas>

import CanvasOrgChart from 'canvas-orgchart'

const canvas = document.getElementById('canvas')
const canvasOrgChart = new CanvasOrgChart(canvas, options)

canvasOrgChart.render(data)

Structure of Datasource

{
  name: 'self', // necessary.
  sex: 0,
  children: [ // necessary and must be an array.
    {
      name: 'son',
      sex: 0,
      children: []
    }
    ...
  ]
}

Options

Name	Type	Default	Description
width	number	0	Canvas 宽度，填 0 时自动计算宽度。
height	number	0	Canvas 高度，填 0 时自动计算高度。
padding	array	[0, 0, 0, 0]	Canvas 内边距，和 CSS padding 类似。
background	string	transparent	Canvas 背景颜色。
lineColor	string	black	组织结构图中连接线的颜色。
node	object		节点样式。
node.width	number	0	节点宽度。
node.height	number	0	节点高度。
node.spacing	array	[20, 20]	节点与节点间的距离。
node.radii	number	8	节点边角的弧度半径。
node.background	string	white	节点背景颜色。
node.borderColor	string	black	节点边框颜色。
node.avatar	object | null	null	节点头像样式。
node.avatar.url	string		节点头像图片 url 地址。
node.avatar.offsetX	number	0	头像在水平方向上的偏移量。
node.avatar.offsetY	number	0	头像在垂直方向上的偏移量。
node.avatar.width	number	0	头像宽度。
node.avatar.height	number	0	头像高度。
node.avatar.circle	boolean	false	是否为圆框头像。
node.name	object | null	null	节点名字样式。
node.name.offsetX	number	0	文字在水平方向上的偏移量。
node.name.offsetY	number	0	文字在垂直方向上的偏移量。
node.name.color	string	black	文字颜色。
node.name.font	string		文字样式。
node.name.textAlign	string	center	文字水平方向上的对齐方式。
node.descs	object | null	null	节点描述区域样式。
node.descs.height	number	0	描述区域高度。
node.descs.background	string	black	描述区域背景颜色。
node.descs.font	string		文字样式。
node.descs.textAlign	string	center	文字水平方向上的对齐方式。
node.descs.offset	object[]	[]	描述区域文字的偏移量。
node.descs.offset.offsetX	number	0	文字在水平方向上的偏移量。
node.descs.offset.offsetY	number	0	文字在垂直方向上的偏移量。

Options Example

options = {
  width: 0,
  height: 0,
  padding: [20],
  background: '',
  lineColor: 'black',
  node: {
    width: 100,
    height: 100,
    spacing: [20, 20],
    radii: 8,
    background: 'white',
    borderColor: 'black',
    avatar: {
      url: '',
      offsetX: 0,
      offsetY: 0,
      width: 0,
      height: 0,
      circle: false
    },
    name: {
      offsetX: 0,
      offsetY: 50,
      color: 'black',
      font: '14px sans-serif',
      textAlign: 'center',
    },
    descs: {
      height: 0,
      color: 'black',
      background: 'white',
      font: '12px sans-serif',
      textAlign: 'center',
      offset: [
        {
          offsetX: 0,
          offsetY: 100,
        },
        {
          offsetX: 0,
          offsetY: 200,
        }
      ]
    },
  },
}

Methods

Name	Params	Returns	Description
render	data	undefined	渲染组织结构图。
addEventListener	event, callBack	undefined	注册事件监听器，当触发指定事件时，对应的回调函数被执行。目前仅支持 select 事件。
removeEventListener	event, callBack	undefined	注销事件监听器。

Screenshots