export-chart.html 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  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/font-awesome.min.css">
  8. <link rel="stylesheet" href="css/jquery.orgchart.css">
  9. <link rel="stylesheet" href="css/style.css">
  10. <style type="text/css">
  11. #chart-container { background-color: #eee; }
  12. .orgchart { background: #fff; }
  13. </style>
  14. </head>
  15. <body>
  16. <div id="chart-container"></div>
  17. <script src="js/jquery.min.js"></script>
  18. <!-- the following reference is specific for IE -->
  19. <script type="text/javascript" src="https://cdn.rawgit.com/stefanpenner/es6-promise/master/dist/es6-promise.auto.min.js"></script>
  20. <script type="text/javascript" src="js/html2canvas.min.js"></script>
  21. <script type="text/javascript" src="js/jspdf.min.js"></script>
  22. <script type="text/javascript" src="js/jquery.orgchart.js"></script>
  23. <script type="text/javascript">
  24. $(function() {
  25. var datascource = {
  26. 'name': 'Lao Lao',
  27. 'title': 'general manager',
  28. 'children': [
  29. { 'name': 'Bo Miao', 'title': 'department manager' },
  30. { 'name': 'Su Miao', 'title': 'department manager',
  31. 'children': [
  32. { 'name': 'Tie Hua', 'title': 'senior engineer' },
  33. { 'name': 'Hei Hei', 'title': 'senior engineer',
  34. 'children': [
  35. { 'name': 'Pang Pang', 'title': 'engineer' },
  36. { 'name': 'Xiang Xiang', 'title': 'UE engineer' }
  37. ]
  38. }
  39. ]
  40. },
  41. { 'name': 'Yu Jie', 'title': 'department manager' },
  42. { 'name': 'Yu Li', 'title': 'department manager' },
  43. { 'name': 'Hong Miao', 'title': 'department manager' },
  44. { 'name': 'Yu Wei', 'title': 'department manager' },
  45. { 'name': 'Chun Miao', 'title': 'department manager' },
  46. { 'name': 'Yu Tie', 'title': 'department manager' }
  47. ]
  48. };
  49. $('#chart-container').orgchart({
  50. 'data' : datascource,
  51. 'visibleLevel': 2,
  52. 'nodeContent': 'title',
  53. 'exportButton': true,
  54. 'exportFilename': 'MyOrgChart'
  55. });
  56. });
  57. </script>
  58. </body>
  59. </html>