Question

我正在尝试从JSON（php - mysql）绘制一个组织结构图（http://goo.gl/wgftfO），但它显示得很好。

这是我的HTML代码：

<script type="text/javascript">

        google.load('visualization', '1', {packages:['orgchart']});
        google.setOnLoadCallback(drawChart);

        function json(){
            $.ajax({
                type: "POST",
                url: "function/ver.php",
                success: function(datos){
                    datos = eval(datos);
                    for (var i=0;i<datos.length;i++){
                         var id = datos[i].id;
                         var nombre = datos[i].nombre;
                         var jefe = datos[i].jefe;
                         alert(id);
                        drawChart(id, nombre);

                        function drawChart(id, nombre) {

                            //alert("Id: " + id + " | Nombre: " + nombre);

                            var data = new google.visualization.DataTable();
                            data.addColumn('string', 'Name');
                            data.addColumn('string', 'Manager');
                            data.addColumn('string', 'ToolTip');
                            data.addRows([

                                [nombre, jefe, id]
                            ]); 

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

                          }
                    }
                },
                error: function(error){
                    alert(error);
                }
            });
        }



        </script>
</head>

<body onLoad="json()">
    <div id="contenido"></div>

</body>

JSON结果：

[
   {
      "id":"1",
      "nombre":"Andrey",
      "paterno":null,
      "foto":"http:\/\/icons.iconarchive.com\/icons\/deleket\/face-avatars\/256\/Male-Face-G1-icon.png",
      "jefe":""
   },
   {
      "id":"2",
      "nombre":"Enrique",
      "paterno":null,
      "foto":"http:\/\/icons.iconarchive.com\/icons\/deleket\/face-avatars\/256\/Male-Face-F3-icon.png",
      "jefe":"Andrey"
   },
   {
      "id":"3",
      "nombre":"Chero",
      "paterno":null,
      "foto":"http:\/\/icons.iconarchive.com\/icons\/deleket\/face-avatars\/256\/Male-Face-E4-icon.png",
      "jefe":"Andrey"
   },
   {
      "id":"4",
      "nombre":"Ricardo",
      "paterno":null,
      "foto":"http:\/\/icons.iconarchive.com\/icons\/deleket\/face-avatars\/256\/Male-Face-F3-icon.png",
      "jefe":"Chero"
   },
   {
      "id":"5",
      "nombre":"Jhon",
      "paterno":null,
      "foto":"http:\/\/icons.iconarchive.com\/icons\/deleket\/face-avatars\/256\/Male-Face-H1-icon.png",
      "jefe":"Enrique"
   }
]

这显示如下： enter image description here

并且，如果我从HTML代码中移除警报（id）（在ajax中），只显示JSON的最后一个对象： enter image description here

我该如何解决这个问题？

或者，还有其他选项来做这个图表吗？

感谢您的回答

Answer 1

波纹管代码对我有用

的index.html

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript' src='js/jquery.min.js'></script>
<script type='text/javascript'>
google.load('visualization', '1', { packages: ['orgchart'] });
google.setOnLoadCallback(drawChart);
function drawChart() {
    $.ajax({
        type: "POST",
        url: "ajax/organization.php",
        success: function(result){
            var result = JSON.parse(result);
          if ((emp_count = result.length) > 0) {

            console.log(result);
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Name');
            data.addColumn('string', 'Manager');
            data.addRows(emp_count);

            for (i = 0; i < emp_count; i++) {
                data.setCell(i, 0, result[i].emp);
                data.setCell(i, 1, result[i].manager);
            }
            var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
             chart.draw(data, { allowHtml: true });
          }

          }
        });
}
</script>

<强> organization.php

define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'USERNAME');
define('DB_PASSWORD', 'PASSWORD');
define('DB_DATABASE', 'DATABASE_NAME');
$connection = mysql_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD) or die(mysql_error());
$database = mysql_select_db(DB_DATABASE) or die(mysql_error());
$query=mysql_query("select emp, manager from employees") or die(mysql_error());

# Collect the results
while($obj = mysql_fetch_object($query)) {
    $arr[] = $obj;
}

# JSON-encode the response
$json_response = json_encode($arr);

// # Return the response
echo $json_response;

Google组织结构图 - 从JSON（mysql）绘制图表

1 个答案:

的index.html