如何在android中实现组织结构图
[英]How to implement an organizational chart in android
问题描述
I want to know how can I implement an organizational chart in Android?
我想知道如何在 Android 中实现组织结构图？
Here is a schema for my layout:这是我的布局的架构：
3 个解决方案
解决方案1
0 2016-01-03 13:56:32
One posible way is to do it in HTML using google charts and use a WebView to view it in your Android App一种可行的方法是使用谷歌图表在 HTML 中执行此操作，并使用 WebView 在您的 Android 应用程序中查看它
https://developers.google.com/chart/interactive/docs/gallery/orgchart?hl=en https://developers.google.com/chart/interactive/docs/gallery/orgchart?hl=en
Demo演示
from the above link, click on从上面的链接，点击 to see it in action
看到它在行动
Code代码
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages:["orgchart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addColumn('string', 'ToolTip');
// For each orgchart box, provide the name, manager, and tooltip to show.
data.addRows([
[{v:'Mike', f:'Mike<div style="color:red; font-style:italic">President</div>'},
'', 'The President'],
[{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'},
'Mike', 'VP'],
['Alice', 'Mike', ''],
['Bob', 'Jim', 'Bob Sponge'],
['Carol', 'Bob', '']
]);
// Create the chart.
var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
// Draw the chart, setting the allowHtml option to true for the tooltips.
chart.draw(data, {allowHtml:true});
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
解决方案2
0 2020-09-17 00:17:16
I know @Tasos already answer this.我知道@Tasos 已经回答了这个问题。
but heres a subclass that i create to help ease the usage但这是我创建的一个子类，以帮助简化使用
Create a OrganizationChart.java创建一个OrganizationChart.java
import android.app.Activity;
import android.util.Log;
public class OrganizationChart {
private Activity activity;
private static OrganizationChart instance;
public String htmlCode = "";
private OrganizationChart(Activity activity) {
this.activity = activity;
}
public static OrganizationChart getInstance(Activity activity) {
if (instance == null) {
instance = new OrganizationChart(activity);
}
return instance;
}
public void addChildToParent(String Child,String Parent){
htmlCode += "['"+Child+"', '"+Parent+"', ''],";
}
public void addChildToParent(String Child,String ChildFunction,String Parent){
htmlCode += "[{'v':'"+Child+"', 'f':'Child"+ChildFunction+"'}, '"+Parent+"', ''],";
}
public void clearData(String Parent,String Child){
htmlCode = "";
}
public String getChart(){
Log.d("OrganizationChart","HTML: "+ htmlCode);
Log.d("OrganizationChart","HTML1: "+ removeLastChar(htmlCode));
return getTopCode() + removeLastChar(htmlCode) +getBottomCode();
}
private String getTopCode(){
String topCode = "";
topCode += "<html>";
topCode += "<head>";
topCode += "<script type=\"text/javascript\" src=\"https://www.gstatic.com/charts/loader.js\"></script>";
topCode += "<script type=\"text/javascript\">";
topCode += "google.charts.load('current', {packages:[\"orgchart\"]});";
topCode += "google.charts.setOnLoadCallback(drawChart);";
topCode += "function drawChart() {";
topCode += "var data = new google.visualization.DataTable();";
topCode += "data.addColumn('string', 'Name');";
topCode += "data.addColumn('string', 'Manager');";
topCode += "data.addColumn('string', 'ToolTip');";
topCode += "data.addRows([";
return topCode;
}
private String getBottomCode(){
String bottomCode = "";
bottomCode += "]);";
bottomCode += "var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));";
bottomCode += " chart.draw(data, {'allowHtml':true});";
bottomCode += " }";
bottomCode += " </script>";
bottomCode += "</head>";
bottomCode += "<body>";
bottomCode += "<div id=\"chart_div\"></div>";
bottomCode += " </html>";
return bottomCode;
}
private String removeLastChar(String str) {
return removeLastChars(str, 1);
}
private String removeLastChars(String str, int chars) {
return str.substring(0, str.length() - chars);
}
}
Then Simply call it when u want to used it like so:然后在你想像这样使用它时简单地调用它：
addChildToParent("child","parent"); addChildToParent("child","parent");
OrganizationChart organizationChart = OrganizationChart.getInstance(this);
organizationChart.addChildToParent("Jacob","<div style=\\\"color:red; font-style:italic\\\">President</div>","Mike");
organizationChart.addChildToParent("Jacob1","Mike");
organizationChart.addChildToParent("Jacob2","Mike");
organizationChart.addChildToParent("Jacob3","Mike");
organizationChart.addChildToParent("Calson1","Jacob1");
organizationChart.addChildToParent("Calson2","Jacob1");
organizationChart.addChildToParent("Calson3","Jacob1");
organizationChart.addChildToParent("Calson4","Jacob1");
webView.getSettings().setJavaScriptEnabled(true);
webView.loadData(organizationChart.getChart(), "text/html", "UTF-8");
OUTPUT输出
解决方案3
0 2021-11-18 05:54:59
The library can be used within RecyclerView and currently works with small graphs only.该库可在 RecyclerView 中使用，目前仅适用于小图。
https://github.com/oss-bandb/GraphView https://github.com/oss-bandb/GraphView
Above library contains:上面的库包含：
- Tree layout树布局
- Directed graph layout有向图布局
- Layered graph分层图
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.