Я создал небольшую оболочку Angular на своем github: brandt-коды / orgchart- angular. Не стесняйтесь использовать ;-) Обновит и украсит этот небольшой проект в ближайшие дни.
Минимальная часть: TS:
import { Component, OnInit } from '@angular/core';
import OrgChart from 'orgchart.js/src/orgchart.js'
@Component({
selector: 'app-orgchart',
templateUrl: './orgchart.component.html',
styleUrls: ['./orgchart.component.scss']
})
export class OrgchartComponent implements OnInit {
private datascource = {
'name': 'Lao Lao',
'title': 'general manager',
'children': [
{ 'name': 'Bo Miao', 'title': 'department manager' },
{ 'name': 'Su Miao', 'title': 'department manager',
'children': [
{ 'name': 'Tie Hua', 'title': 'senior engineer' },
{ 'name': 'Hei Hei', 'title': 'senior engineer',
'children': [
{ 'name': 'Pang Pang', 'title': 'engineer' },
{ 'name': 'Xiang Xiang', 'title': 'UE engineer' }
]
}
]
},
{ 'name': 'Yu Jie', 'title': 'department manager' },
{ 'name': 'Yu Li', 'title': 'department manager' },
{ 'name': 'Hong Miao', 'title': 'department manager' },
{ 'name': 'Yu Wei', 'title': 'department manager' },
{ 'name': 'Chun Miao', 'title': 'department manager' },
{ 'name': 'Yu Tie', 'title': 'department manager' }
]
};
public orgchartFromData: OrgChart;
constructor() { }
ngOnInit() {
this.orgchartFromData = new OrgChart({
'chartContainer': '#chartContainerData',
'data' : this.datascource,
'depth': 2,
'nodeContent': 'title'
});
}
}
и HTML:
<div id="chartContainerData"></div>
PS: я использовал пакет orgchart.js
(не orgchart
).