developer tip

Google Org Chart API와 비교할 때 더 나은 자바 스크립트 조직도가 있습니까?

optionbox 2020. 12. 5. 09:40
반응형

Google Org Chart API와 비교할 때 더 나은 자바 스크립트 조직도가 있습니까?


Google 조직도 API를 사용하여 조직도를 표시하고 있습니다. 이것은 잘 작동하지만 다음을 지원하는 것이 필요합니다.

  1. 한 사람이 여러 관리자에게보고
  2. 기능 영역의 공동 책임자.

위의 사항을 더 잘 지원하는 경쟁 도구가 있습니까?


참고 : 아래 답변 중 하나에서이 솔루션을 제안한 Gorka LLona의 경우 몇 가지 버그를 발견했습니다. 여기에 테스트 예제를 사용하여 실행중인 문제의 스크린 샷이 있습니다.

여기에 이미지 설명 입력


Jit (JavaScript Infoviz Toolkit)을 사용할 수 있습니다 . 여기에 좋은 예가 있습니다 . 이것이 제가 회사에서 조직도를 만드는 데 사용한 것입니다 (AD 관계를 JSON으로 바꾸는 PHP 스크립트로 뒷받침 됨).


D3-http: //d3js.org/

다음은 예입니다. 찾기가 조금 어렵습니다.

http://bl.ocks.org/1061834


이것이 2 살이라는 것을 고려하여 여전히 찾고 있는지 확실하지 않지만 같은 상황에 있으며 이것을 발견했습니다.

yFILES http://live.yworks.com/demobrowser/index.html#Organization-Charts

내가 찾은 다른 것들 :

jOrgChart http://dl.dropboxusercontent.com/u/4151695/html/jOrgChart/example/example.html

JS http://jvloenen.home.xs4all.nl/orgchart/를 사용한 조직도

나는 그것을 위해 D3.js를 사용하게되었다. 나는 그들의 TreeLayout을 사용하고 내 필요에 맞게 편집했습니다. 다음은 몇 가지 샘플 코드입니다.

var tree = d3.layout.tree().nodeSize([70, 40]);
var diagonal = d3.svg.diagonal()
    .projection(function (d) {
    return [d.x + rectW / 2, d.y + rectH / 2];
});

var svg = d3.select("#body").append("svg").attr("width", 1000)
    .attr("height", 1000).append("g")
    .attr("transform", "translate(" + 350 + "," + 20 + ")");

내가 시작한 jsFiddle은 다음과 같습니다. http://jsfiddle.net/augburto/YMa2y/


요컨대 @Cam이 맞지만 반드시 Silverlight 나 Flash를 볼 필요는 없습니다. Raphael.js 라이브러리를 살펴 보는 것이 좋습니다 . 당신이 추구하는 것보다 더 낮은 수준이지만 API는 매우 간단합니다.

특히 Graffle 예제 는 시작하기에 좋은 곳입니다.


lib_gg_orgchart의 새 웹 홈은 http://librerias.logicas.org/lib_gg_orgchart 입니다. 여기에 이전 정보를 넣었습니다. 간단한 오픈 소스 Javascript Organizational Chart 라이브러리를 찾는 사람들을 위해 : 방금 lib_gg_orgchart를 게시했습니다. JSON 입력을 사용하고 Raphael을 사용하여 차트를 그립니다. 사이트에서 몇 가지 예를 살펴보고 다운로드하십시오. 유용하다고 생각되면 알려주십시오. 곧 새로운 버전이 출시되어 일부 버그를 수정하고 공동 작업자의 변경 사항을 통합 할 예정입니다.


간단한 오픈 소스 Javascript Organizational Chart 라이브러리를 찾는 사람들을 위해 :

방금 lib_gg_orgchart를 게시했습니다. JSON 입력을 사용하고 Raphael을 사용하여 차트를 그립니다.

이 라이브러리는 원래 질문의 요구 사항 # 1 및 # 2를 충족합니다.

사이트에서 몇 가지 예를 살펴보고 다운로드하십시오.

http://librerias.logicas.org/lib_gg_orgchart/index.html

유용하다고 생각되면 알려주십시오.


상업적 시나리오 에서 HTML 용 yFiles는 확실히 필요한 유연성을 제공합니다.

라이브러리 (실제로는 범용 그래프 그리기 라이브러리)로 구현하는 방법을 보여주는 간단한 조직도 데모가 온라인 에 있습니다.

조직도 데모 스크린 샷

라이브러리의 자동 레이아웃 알고리즘은 순전히 계층 적 트리 구조를 처리 할 수 ​​있지만 요소가 여러 상위를 가질 수있는 "근접 트리"구조 (예 : 관리 팀 또는 여러 모회사 모델링)도 처리 할 수 ​​있습니다.

The library also has layout algorithms that can deal with generic graphs with arbitrary cyclic complexity and with the edge routing algorithms available, even rare edge cases can be visualized nicely, where edges that do not belong to the strict hierarchical tree-structure can be routed, too (e.g. to indicate an additional layer of relationships) - this is not part of the demo linked above, though, at the time of writing. The more generic layout demo however shows several of the layout algorithms and many of their options in action.

Disclaimer: I work for the company that creates that library, however on SO I do not represent my employer. My comments, thoughts, and answers are my own.


If you're looking for alternatives that works as a service like google does, I don't think you have any. If you're looking for libraries (js, php, flash) that can create these charts for you (you can install the libs in a server, and create a simple interface to create the chart objects) you can search for older posts in SO or by searching some blog posts in google.

If you're only interested in an Org Chart creator, just to get the work done, nothing beats Creately's solutions in my opinion. If you need to create just one diagram, and don't want to pay for it, you can use Lovely Charts.


You can implement a solution with Graphviz and Javascript. Graphviz easily handles all three of your conditions. Create the graph in graphviz, and have it output in SVG format. From there, throw some javascript on it. For example, a partial family tree of Charlemagne, which is essentially an extraordinarily complex org chart.


You could use a trie: https://github.com/mikedeboer/trie or https://github.com/odhyan/trie Mootools also has MIF.Tree: http://mootools.net/forge/p/mif_tree, which displays tree structures


Well www.orgchartasp.net will also help you build / view orgcharts

http://orgchartasp.net/Sample.aspx

http://orgchartasp.net/Sample1.aspx (with images on the top)

http://orgchartasp.net/Sample1.aspx (with images on the left)

this is a .net library which will help you build the hierarchy at the backend and javascript at the client side.


G'Day ooo

I'll keep this short. No there isn't. Not with Javascript anyway. You might find http://www.cogmap.com/ interesting but it's not something you can use as a control on your own pages.

Personally, I'd be looking at some of the rich embedded media like Silverlight or Flash. Is that an option for you?

Cam


I too am using google org chart API to display our org charts. https://developers.google.com/chart/interactive/docs/examples

This works well but we need something that supports:

1) 소스는 조직도에 대한 데이터가 들어있는 Google 스프레드 시트 문서입니다. 2) 데이터에 새로운 사람이 추가되면 새로운 노드가 생성됩니다. 3) 1 차 및 2 차 레벨의 수평 레이아웃과 낮은 레벨의 수직 레이아웃. 유사 : http://google-visualization-api-issues.googlecode.com/issues/attachment?aid=8730161231813373288&name=orgchart.png&token=RT7QPbsD-WkveIgybTZyXi48g84%3A1361392544450&inline=1

1과 2는 Google에서 지원하고 훌륭하게 작동하지만 3 가지 요구 사항 (가로 및 세로 레이아웃)에 필요한 것이 있습니다.

참고 URL : https://stackoverflow.com/questions/3923221/are-there-any-better-javascript-org-charts-compared-with-google-org-chart-api

반응형