带有其他文字的GoogleVis Orgchart
[英]GoogleVis Orgchart with additional text
问题描述
GoogleVis Orgchart from example 
GoogleVis Orgchart示例
My Need (ie add additional information to the nodes, such as President in the example) 我的需要（即向节点添加其他信息，例如示例中的President）
My try, with help from here . 我的尝试，在这里的帮助下。
library(googleVis)
Org <- gvisOrgChart(idvar = {v:goo$Region, f:goo$Val} , parentvar = goo$Parent, tipvar = goo$Val,
options=list(allowHtml=TRUE, width=600, height=250,
size='large', allowCollapse=TRUE))
plot(Org)
But not working, any help? 但是不起作用，有什么帮助吗？ I plan to use this in shinydashboard. 我计划在Shinydashboard中使用它。
2 个解决方案
解决方案1
-1 2016-09-25 14:16:48
You can easily add addition information with GetOrgChart 您可以使用GetOrgChart轻松添加附加信息
Here is an example: 这是一个例子：
$("#people").getOrgChart({ primaryColumns: ["name", "title"], dataSource: [{ id: 1, parentId: null, name: "Mike", title: "President" }, { id: 2, parentId: 1, name: "Jim", title: "Vice President" }, { id: 3, parentId: 1, name: "Alice" }, { id: 4, parentId: 2, name: "Bob" }, { id: 5, parentId: 4, name: "Carol" } ] });
html, body { margin: 0px; padding: 0px; width: 100%; height: 100%; overflow: hidden; } #people { width: 100%; height: 100%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://www.getorgchart.com/GetOrgChart/getorgchart/getorgchart.js"></script> <link href="http://www.getorgchart.com/GetOrgChart/getorgchart/getorgchart.css" rel="stylesheet" /> <div id="people"></div>
解决方案2
-1 2018-10-31 11:44:40
I think this will help you 我想这对你有帮助
https://www.jqueryscript.net/chart-graph/Fully-Customizable-Organisational-Chart-Plugin-With-jQuery-OrgChart.html https://www.jqueryscript.net/chart-graph/Fully-Customizable-Organisational-Chart-Plugin-With-jQuery-OrgChart.html
just modify dataScource according to your need it will display all content that you want. 只需根据您的需要修改dataScource，它将显示您想要的所有内容。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Organization Chart Plugin</title> <link rel="icon" href="img/logo.png"> <link rel="stylesheet" href="css/font-awesome.min.css"> <link rel="stylesheet" href="css/jquery.orgchart.css"> <link rel="stylesheet" href="css/style.css"> <style type="text/css"> #chart-container { text-align: right; } </style> </head> <body> <div id="chart-container"></div> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.orgchart.js"></script> <script type="text/javascript"> $(function() { var datascource = { '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' : datascource, 'nodeContent': 'title', 'direction': 'r2l' }); }); </script> </body> </html>
Thankyou 谢谢
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.