使用 canvas 绘制组织架构图/族谱图

Canvas-OrgChart

Draw orgchart/genealogychart with canvas.

Installation

Of course, you can directly use the standalone build by including canvas-orgchart.js in your webapps.

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: 'father', // necessary. avatar: '', sex: 0, children: [ // necessary and must be an array. { name: 'self', avatar: '', sex: 0, children: [] } ] } Options

Name Type Default Description
width number auto Canvas width.
height number auto Canvas height.
scale array [1, 1] Scales the canvas units by x horizontally and by y vertically.
originX number 0 Draw chart x starting coordinates.
originY number 0 Draw chart y starting coordinates.
padding array [0, 0, 0, 0] The chart padding as css padding.
node object Style of the node.
node.width number 60 Node width.
node.height number 160 Node height.
node.spacing array [20, 20] Node spacing.
node.color string white Node color.
node.background string cornflowerblue Node background.
node.customBackgrounds array [] Customize backgrounds based on property values.
node.defaultAvatar string '' Node avatar.
node.customAvatar object null Customize avatar based on property values.
node.nodeTemplate array or function [] Custom node template.Global replacement if it's a function.
Options Example

options = { width: 0, // auto height: 0, scale: [1, 1], originX: 0, originY: 0, padding: [10, 50], node: { width: 60, height: 160, spacing: [20, 20], color: 'white', background: 'cornflowerblue', customBackgrounds: [ { attributeName: 'sex', checkOwn: false, color: { 0: 'cornflowerblue', 1: 'lightcoral' } }, { attributeName: 'self', checkOwn: true, color: 'black' } ], defaultAvatar: '/images/male.jpg', customAvatar: { attributeName: 'sex', avatars: { 0: '/images/male.jpg', 1: '/images/female.jpg' } }, }, nodeTemplate: [ { attributeName: 'spouse', checkOwn: true, width: 120, draw: function(that, ctx, x, y, node) { that.drawAvatar(ctx, x, y, node) that.drawAvatar(ctx, x + this.width / 2, y, node.spouse) // node color if (node.sex === 0) { ctx.fillStyle = 'cornflowerblue' } else { ctx.fillStyle = 'lightcoral' } ctx.fillRect(x, y + that.nodeWidth, that.nodeWidth, that.nodeHeight - that.nodeWidth) if (node.spouse && node.spouse.sex === 0) { ctx.fillStyle = 'cornflowerblue' } else if (node.spouse && node.spouse.sex === 1) { ctx.fillStyle = 'lightcoral' } ctx.fillRect(x + this.width / 2, y + that.nodeWidth, that.nodeWidth, that.nodeHeight - that.nodeWidth) ctx.stroke() const textHeight = that.nodeHeight - that.nodeWidth that.drawVerticalText(ctx, x, y + that.nodeWidth, that.nodeWidth, textHeight, node.name) that.drawVerticalText(ctx, x + this.width / 2, y + that.nodeWidth, that.nodeWidth, textHeight, node.spouse.name) } } ] }

The nodeTemplate can write multiple objects inside,each object is drawn for a different property. Explain what each of its properties does:

Name Type Default Description
attributeName string The node that owns this property uses this custom template.
checkOwn boolean Check whether the node owns this property.
width number 60 The node width.
draw function null How to draw this node.
Methods render(canvas, data)

It's the useful way when users want to re-initialize or refresh orgchart based on new options or reload new data.

Property currentSelected

Get the node that is currently selected.

Screenshots

版权声明:

1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。
2、网站不提供资料下载,如需下载请到原作者页面进行下载。