orgchart 3.5.0 → 3.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -0
- package/demo/export-chart-with-pictures.html +89 -0
- package/demo/index.html +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -87,6 +87,12 @@ Here, we need the help from [html2canvas](https://github.com/niklasvh/html2canva
|
|
|
87
87
|
|
|
88
88
|
(3) Besides, if you wanna export a pdf format or your orgchart includes picture, you have to introduce [jspdf](https://github.com/MrRio/jsPDF) and set "exportFileextension" option to "pdf".
|
|
89
89
|
|
|
90
|
+
- [I wanna export the orgchart with nodes containing pictures](https://dabeng.github.io/OrgChart/export-chart-with-pictures.html)
|
|
91
|
+
|
|
92
|
+
You need to set crossorigin to anonymous for your img tags.
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
|
|
90
96
|
- [I wanna itegrate organization chart with geographic information](https://dabeng.github.io/OrgChart/integrate-map.html)
|
|
91
97
|
|
|
92
98
|
Here, we fall back on [OpenLayers](https://github.com/openlayers/ol3). It's the most aewsome open-source js library for Web GIS you sholdn't miss.
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<title>Organization Chart Plugin</title>
|
|
6
|
+
<link rel="icon" href="img/logo.png">
|
|
7
|
+
<link rel="stylesheet" href="css/jquery.orgchart.css">
|
|
8
|
+
<link rel="stylesheet" href="css/style.css">
|
|
9
|
+
<style type="text/css">
|
|
10
|
+
#chart-container {
|
|
11
|
+
height: 550px;
|
|
12
|
+
}
|
|
13
|
+
.orgchart .node .title {
|
|
14
|
+
height: unset;
|
|
15
|
+
text-align: left;
|
|
16
|
+
line-height: 40px;
|
|
17
|
+
width: 150px;
|
|
18
|
+
}
|
|
19
|
+
.orgchart .node .content {
|
|
20
|
+
text-align: left;
|
|
21
|
+
padding: 5px;
|
|
22
|
+
}
|
|
23
|
+
.orgchart .node .content .symbol {
|
|
24
|
+
color: #aaa;
|
|
25
|
+
margin-right: 20px;
|
|
26
|
+
}
|
|
27
|
+
.oci-leader::before, .oci-leader::after {
|
|
28
|
+
background-color: rgba(217, 83, 79, 0.8);
|
|
29
|
+
}
|
|
30
|
+
.orgchart .node .avatar {
|
|
31
|
+
width: 60px;
|
|
32
|
+
height: 60px;
|
|
33
|
+
border-radius: 30px;
|
|
34
|
+
float: left;
|
|
35
|
+
margin: 5px;
|
|
36
|
+
}
|
|
37
|
+
</style>
|
|
38
|
+
</head>
|
|
39
|
+
<body>
|
|
40
|
+
<div id="chart-container"></div>
|
|
41
|
+
|
|
42
|
+
<script type="text/javascript" src="js/jquery.min.js"></script>
|
|
43
|
+
<script type="text/javascript" src="js/jquery.orgchart.js"></script>
|
|
44
|
+
<script type="text/javascript" src="js/html2canvas.min.js"></script>
|
|
45
|
+
<script type="text/javascript">
|
|
46
|
+
$(function() {
|
|
47
|
+
|
|
48
|
+
var datascource = {
|
|
49
|
+
'id': '1',
|
|
50
|
+
'name': 'Lao Lao',
|
|
51
|
+
'title': 'general manager',
|
|
52
|
+
'children': [
|
|
53
|
+
{ 'id': '2', 'name': 'Bo Miao', 'title': 'department manager' },
|
|
54
|
+
{ 'id': '3', 'name': 'Su Miao', 'title': 'department manager',
|
|
55
|
+
'children': [
|
|
56
|
+
{ 'id': '4', 'name': 'Tie Hua', 'title': 'senior engineer' },
|
|
57
|
+
{ 'id': '5', 'name': 'Hei Hei', 'title': 'senior engineer',
|
|
58
|
+
'children': [
|
|
59
|
+
{ 'id': '6', 'name': 'Pang Pang', 'title': 'engineer' },
|
|
60
|
+
{ 'id': '7', 'name': 'Xiang Xiang', 'title': 'UE engineer' }
|
|
61
|
+
]
|
|
62
|
+
}
|
|
63
|
+
]
|
|
64
|
+
},
|
|
65
|
+
{ 'id': '8', 'name': 'Yu Jie', 'title': 'department manager' },
|
|
66
|
+
{ 'id': '9', 'name': 'Yu Li', 'title': 'department manager' },
|
|
67
|
+
{ 'id': '10', 'name': 'Hong Miao', 'title': 'department manager' },
|
|
68
|
+
{ 'id': '11', 'name': 'Yu Wei', 'title': 'department manager' },
|
|
69
|
+
{ 'id': '12', 'name': 'Chun Miao', 'title': 'department manager' },
|
|
70
|
+
{ 'id': '13', 'name': 'Yu Tie', 'title': 'department manager' }
|
|
71
|
+
]
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
$('#chart-container').orgchart({
|
|
75
|
+
'exportButton': true,
|
|
76
|
+
'exportFilename': 'MyOrgChart',
|
|
77
|
+
'data' : datascource,
|
|
78
|
+
'nodeContent': 'title',
|
|
79
|
+
'nodeID': 'id',
|
|
80
|
+
'createNode': function($node, data) {
|
|
81
|
+
$node.find('.title').append(`<img class="avatar" src="https://dabeng.github.io/OrgChart/img/avatar/${data.id}.jpg" crossorigin="anonymous" />`);
|
|
82
|
+
$node.find('.content').prepend($node.find('.symbol'));
|
|
83
|
+
}
|
|
84
|
+
});
|
|
85
|
+
|
|
86
|
+
});
|
|
87
|
+
</script>
|
|
88
|
+
</body>
|
|
89
|
+
</html>
|
package/demo/index.html
CHANGED
|
@@ -124,6 +124,7 @@
|
|
|
124
124
|
<li><a href="edit-chart.html" target="_blank">edit chart</a></li>
|
|
125
125
|
<li><a href="edit-hybrid-chart.html" target="_blank">edit hybrid chart</a></li>
|
|
126
126
|
<li><a href="export-chart.html" target="_blank">export chart as a picture</a></li>
|
|
127
|
+
<li><a href="export-chart-with-pictures.html" target="_blank">export chart with pictures</a></li>
|
|
127
128
|
<li><a href="export-chart-pdf.html" target="_blank">export chart as a PDF</a></li>
|
|
128
129
|
<li><a href="filter-node.html" target="_blank">filter node</a></li>
|
|
129
130
|
<li><a href="get-hierarchy.html" target="_blank">getHierarchy() method</a></li>
|
package/package.json
CHANGED