'조직도'에 해당되는 글 1건

오늘은 조직도를 표현할때 유용한 OrgChart를 소개합니다. 

 이차트를 소개하는 이유는 매우 사용하기 편하면서도 표현력이 좋습니다. 

아래의 예제를 보시죠. 

엄청 깔끔하게 나오지 않나요?

소스는 더 간결합니다. 

// sample of core source code

var datasource = {
  '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' }
      ]
    },
    { 'name': 'Hong Miao', 'title': 'department manager' },
    { 'name': 'Chun Miao', 'title': 'department manager' }
  ]
};

$('#chart-container').orgchart({
  'data' : datasource,
  'depth': 2,
  'nodeContent': 'title'
});

children에 json 형태의 데이터만 넣어주면 됩니다. 

작동하는것도 보시죠?

매우 인상적이지 않나요?

역방향으로도 표시되고 4방향으로 표시할수 있어요.

정말 대박이라고 밖에 말할수 없네요. 

저는 이것으로 인맥관계도를 표시해 보았는데요. 

참으로 편했습니다. 

컬러도 이렇게 수정하면 이쁘게 변경할수 있습니다. 

와우 정말 깔끔하지 않나요?

사진이나 아이콘으로 표시할수도 있습니다. 

거기에 라이센스는 The MIT License (MIT) 이렇지요.

데모및 소스는 여기서 볼수 있습니다.

https://github.com/dabeng/OrgChart

그럼 즐거운 개발 되세요.