Question

我试图使用谷歌图表API制作组织结构图..像这样

但我希望它能够读取 CSV文件中的名称，该名称包含500名员工的大数据＆gt;＆gt;我怎么能这样帮忙？

Thanks,
Best Regards, 
Hisham

更新如下：

方法1的代码：

<!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>

方法2的代码：

<!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

Answer 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>

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

使用google visualization api从CSV文件中读取名称的组织结构图？

1 个答案: