使用从 CSV 文件中读取名称的谷歌可视化 api 的组织结构图？答案

【问题标题】：Organizational chart using google visualization api that reads names from an CSV file?使用从 CSV 文件中读取名称的谷歌可视化 api 的组织结构图？
【发布时间】：2015-07-24 12:42:12
【问题描述】：

我正在尝试使用谷歌图表 api 制作组织结构图 .. 像这样

http://jsfiddle.net/hisham91/pbkuok2u/

但我希望它从 CSV 文件 中读取名称，该文件包含超过 500 名员工的大数据 >> 我该怎么做？请帮忙？

Thanks,
Best Regards, 
Hisham

以下更新：

方法一的代码：

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.min.js"></script>

<script type="text/javascript">
        google.load("visualization", "1.1", {packages:["corechart"]});
        google.setOnLoadCallback(drawVisualization);

 function drawVisualization() {
    var query = new google.visualization.Query(
        'address.csv');

    // Apply query language statement.
    query.setQuery('SELECT * ');

    // Send the query with a callback function.
    query.send(handleQueryResponse);
  }

  function handleQueryResponse(response) {
    if (response.isError()) {
      alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
      return;
    }

    var data = response.getDataTable();
    visualization = new google.visualization.orgchart(document.getElementById('address_chart'));
    visualization.draw(data, {legend: 'bottom'});
  }
</script>
</head>

<body>
<div id="address_chart" style="width: 640px; height: 480px;"></div>

</body>
</html>

方法二的代码：

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
        google.load("visualization", "1", {packages:["orgchart"]});

        $(function(){

            $.ajax({
                type:'post',
                dataType:'json',
                data:'orgChart2.php',
                url:'address.csv',
                success:function(data){
                    var dt = new google.visualization.DataTable();
                    dt.addColumn('string', 'Employee');
                    dt.addColumn('string', 'Manager');
                    dt.addColumn('string', 'ToolTip');

                    dt.addRows(data);


                    var chart = new google.visualization.OrgChart(document.getElementById('address_chart'));
                    chart.draw(dt, {allowHtml:true});

                }
            });
        });
    </script>
</head>

<body>
<div id="address_chart" style="width: 640px; height: 480px;"></div>

</body>
</html>

注意：没有显示 - 空白页。

还要注意我的 address.csv 文件包含以下内容：

**Employee     Manager**
Darren Parker  
Tanja Plate    Darren Parker
Allie Bellew   Darren Parker
Franz Kohl     Tanja Plate
Cindy White    Allie Bellew
Chris Norred   Cindy White

【问题讨论】：

如果要构建组织结构图，应该组织好数据并传递给data.addRow
是的，我知道，他们是有组织的，你检查了我的 csv 文件我希望数据通过 csv 文件传递我不能为每个员工添加一个 addrow ！ ://

标签： php jquery json csv google-visualization

【解决方案1】：

完成任务的最佳方法是在 java 脚本本身中编写查询，以从 CSV 图表中获取数据，您可以将数据放入数组中

您可以尝试使用此代码从 csv 检索数据

   function drawVisualization() {
    var query = new google.visualization.Query(
        'your sheet source here');

    // Apply query language statement.
    query.setQuery('SELECT A,D WHERE D > 100 ORDER BY D');

    // Send the query with a callback function.
    query.send(handleQueryResponse);
  }

  function handleQueryResponse(response) {
    if (response.isError()) {
      alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
      return;
    }

    var data = response.getDataTable();
    visualization = new google.visualization.LineChart(document.getElementById('visualization'));
    visualization.draw(data, {legend: 'bottom'});
  }

您可以找到更多信息Here

另一种方法是编写一个 ajax 函数来获取员工的数据

<script type="text/javascript">
        google.load("visualization", "1", {packages:["orgchart"]});
        $(function(){

            $.ajax({
                type:'post',
                dataType:'json',
                data:'urlOfyourpage',
                url:'urlofthepage',
                success:function(data){
                    var dt = new google.visualization.DataTable();
                    dt.addColumn('string', 'Namess');
                    dt.addColumn('string', 'Manager');
                    dt.addColumn('string', 'ToolTip');

                    dt.addRows(data);


                    var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
                    chart.draw(dt, {allowHtml:true});

                }
            });
        });
    </script>

您将需要根据您获得的数据来组织孩子和父母。

【讨论】：