canvas-orgchart v0.1.1

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

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

Screenshots