如何在android中实现组织结构图答案

【问题标题】：How to implement an organizational chart in android如何在android中实现组织结构图
【发布时间】：2016-01-03 13:26:59
【问题描述】：

我想知道如何在 Android 中实现组织结构图？

这是我的布局的架构：

【问题讨论】：

标签： android android-layout charts organizational-chart

【解决方案1】：

一种可能的方法是使用谷歌图表在 HTML 中完成，并使用 WebView 在您的 Android 应用程序中查看它

https://developers.google.com/chart/interactive/docs/gallery/orgchart?hl=en

演示

从上面的链接，点击看看它的实际效果

代码

<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】：

我知道@Tasos 已经回答了这个问题。
但这是我创建的一个子类以帮助简化使用

创建一个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);
    }

}

然后当你想这样使用它时只需调用它：
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");

输出

【讨论】：

【解决方案3】：

该库可在 RecyclerView 中使用，目前仅适用于小图。

https://github.com/oss-bandb/GraphView

以上库包含：

树形布局
有向图布局
分层图

【讨论】：