`
jjfat
  • 浏览: 293450 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

使用Javascript来实现的超炫组织结构图(Organization Chart)

阅读更多

最近有个内部项目需要使用组织结构图(organization chart), 寻找了一些开源的项目及其类库,发现竟然没有现成的JS类库可以使用,找到一些简单的JS实现,不过界面及其操作及其简单,不过功夫不负有心人,经过几天国内国外的搜索,找到了一个非常好的解决方案,这里分享给大家。

Javascript InfoVis tools

这个开源的javascript类库可以生成非常炫酷的结构和图形,我选择了其中的一种spacetree类型做为我的组织结构图基础,这种图形可以支持一下特性:

  • 支持向上下左右四个方向展开图表
  • 支持子节点扩展
  • 支持图表拖放
  • 支持图表缩放

整个类库异常强大,非常合适复杂的图形功能需求,如下:

 

 

具体代码及其在线演示请参考原文

 

文章来源:使用Javascript来实现的超炫组织结构图(Organization Chart)

分享到:
评论
2 楼 jjfat 2011-07-26  
jilo88 写道
非常感谢,我的项目中也要用到组织结构图,幸好有你的介绍,不然真不知要找到什么时候。如果不介意,请您把使用方式与心得讲讲,并把您的效果打包放出来,那就非常感谢了。


代码你可以直接去演示里下载,都是开源的,没什么问题。 具体怎么用,最好方式是你自己去jsfiddle里调试就好了。
1 楼 jilo88 2011-07-20  
非常感谢,我的项目中也要用到组织结构图,幸好有你的介绍,不然真不知要找到什么时候。如果不介意,请您把使用方式与心得讲讲,并把您的效果打包放出来,那就非常感谢了。

相关推荐

    Javascript实现的超炫组织结构图

    Javascript实现的超炫组织结构图 支持动态效果 支持JQuery 支持JSON数据格式 支持动态填充数据 支持拖拽 支持结点展开收缩 支持变换根结点 支持结点形状变换(矩形、椭圆型、圆形、五角星等) 支持线条样式变换 支持...

    jQuery实现公司组织结构图

    本篇文章将详细讲解如何利用jQuery来实现一个公司组织结构图,帮助你理解并掌握这一实用技能。 首先,组织结构图是展示公司内部层次关系和员工职责的有效工具。在网页上实现这样的图,可以使用jQuery与其他前端技术...

    jQuery组织结构图表插件OrgChart.zip

    jQuery组织结构图表插件OrgChart是一款基于jQuery的高效、易用的图表展示工具,尤其适用于构建企业或项目的组织架构图。该插件以其灵活的配置选项和丰富的自定义功能,为开发者提供了便捷的方式来创建和展示层次分明...

    js实现的组织结构图

    在压缩包中“js实现的组织结构图”可能是示例代码或者完整的实现,可以作为参考来学习和理解如何用JavaScript实现组织结构图。通过阅读和理解代码,你可以更好地掌握这一技术,并将其应用到自己的项目中。 总结来说...

    JavaScript显示组织结构图

    这个压缩包提供了实现这一功能的JS文件和一个示例HTML文件,让我们一起深入了解一下如何使用JavaScript来显示组织结构图。 首先,`organization.js` 文件很可能是包含组织结构图绘制逻辑的核心代码。在JavaScript中...

    【JavaScript源代码】vue使用echarts画组织结构图.docx

    在本文中,我们将探讨如何使用JavaScript库ECharts在Vue框架中绘制组织结构图。ECharts是一款由百度开发的开源可视化库,提供了丰富的图表类型,包括折线图、柱状图和饼状图等。 在描述中提到,开发者遇到了在Vue...

    用JavaScript实现的员工组织结构图.zip

    【标题】"用JavaScript实现的员工组织结构图"是一个项目,它展示了如何使用JavaScript语言来构建一个描绘企业内部员工组织架构的图形界面。这个项目可能包含一个基础的网页模板,用于展示组织结构,并且可能提供了...

    d3-organization-chart:使用d3.js v5构建的高度可定制的组织结构图

    使用d3 v5构建的高度可定制的组织结构图。 查看示例 (最新更新) 查看几个库和框架的集成 我使用的自定义组件和算法 -Observablehq游乐场 正在安装 npm i d3-org-chart 文件 用法 const TreeChart = require ('...

    OrgChartjs这是一个简单直接的组织结构图插件

    OrgChart.js 是一款轻量级且易于使用的JavaScript库,专门设计用于创建组织结构图。这款插件能够帮助开发者快速地在网页上展示清晰、直观的人员或机构层级关系,适用于企业内部管理、团队结构展示、项目组分配等各种...

    jQuery组织结构图表插件OrgChart

    jQuery组织结构图表插件OrgChart是一款强大的前端工具,专门用于创建直观、动态的组织结构图。这个插件基于流行的JavaScript库jQuery,使得开发者能够轻松地在网页上展示公司的层级关系、团队成员分布或其他类似的...

    javascript使用smipleChart实现简单图表

    在介绍如何使用JavaScript结合simpleChart库实现简单图表前,首先要了解simpleChart是一个能够快速生成图表的JavaScript库,它支持多种类型的图表,包括线性图、区域图、柱状图和饼图。simpleChart的主要优点是易于...

    几种组织结构图

    本资源主要探讨了如何使用JavaScript(js)来实现组织结构图,这对于Web开发人员来说是十分实用的技能。JavaScript是一种广泛使用的客户端脚本语言,能够为网页添加动态功能。以下是关于使用JavaScript实现组织结构...

    orgchart.js 组织架构图之JQuery插件

    组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织...组织架构图之JQuery插件orgchart.js orgchart.js orgchart.js orgchart.js orgchart.js orgchart.js orgchart.js orgchart.js orgchart.js ...

    组织树结构 OrgChart-master 完整代码demo

    6. **代码示例**:“OrgChart-master”很可能包含了实现上述功能的JavaScript代码,可能使用了流行的前端库,如D3.js或jQuery。这些代码示例可以帮助开发者快速理解和实现类似的组织树结构功能,节省开发时间。 7. ...

    highchart组织架构图.zip

    在这个"highchart组织架构图.zip"压缩包中,包含了用HTML和JavaScript构建的组织结构图示例。以下是对这个主题的详细讲解: 1. **Highcharts简介**: Highcharts是一个开源的JavaScript库,适用于Web应用程序中的...

    orgchart 组织架构图 demo 实例

    在本篇文章中,我们将深入探讨orgchart相关的知识,包括其基本概念、应用场景、常见实现方式,以及如何通过编程语言来创建和展示组织架构图。 一、组织架构图的基本概念 组织架构图是用图形表示企业或机构内部的...

    组织架构图实现-jOrgChart的使用

    它利用HTML5的canvas元素来绘制图表,提供了简洁的API接口和灵活的配置选项,使得开发者能够快速地在网页上构建出美观的组织结构图。 **一、jOrgChart的基本用法** 1. **引入依赖**:首先,你需要在HTML文件中引入...

    JavaScript实现文档结构图

    JavaScript实现文档结构图! 值得下载看看!资源免费,大家分享!!

Global site tag (gtag.js) - Google Analytics