无法使用mysqldata在组织谷歌图表中添加用户及其图片的更多详细信息 - unable to add more details of user and their picture in organizational google chart using mysqldata

unable to add more details of user and their picture in organizational google chart using mysqldata

我正在使用mysql数据创建一个组织谷歌图表。我能够从mysql数据库检索数据，并显示为层次结构，但问题是我无法显示每个人的图像在该图表中存储在数据库中。子数据和父数据存储在一个数组中，因此我无法在图表中显示该人员的更多详细信息。如果我添加一个额外的数据，我从mysql数据库中得到的，我的代码只取第一个值，只显示人名，我想显示的人的更多细节。

下面是我的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
<?php
include_once('dbconfig.php');

$query = $connection->prepare('SELECT hierarchy.child,hierarchy.id,usertest.userID, usertest.name
                        FROM hierarchy
                        INNER JOIN usertest
                        ON hierarchy.userID=usertest.userID
                        ORDER BY hierarchy.id');
$query->execute();
$results = $query->get_result();
$flag = true;
$table = array();
$table['cols'] = array(
    array('label' => 'child', 'type' => 'string','image'),
    array('label' => 'Parent', 'type' => 'string'),
    array('label' => 'userID', 'type' => 'number', 'role' => 'tooltip','trigger'=>'selection' ),


);
$table['rows'] = array();
foreach ($results as $row) {
    $temp = array();
    $temp[] = array('v' =>  $row['child']);
    $temp[] = array('v' => $row['name']);
    $temp[] = array('v' =>  $row['userID']);


    $table['rows'][] = array('c' => $temp);
}
$jsonTable = json_encode($table);
?>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <title>
        Google Visualization API Sample
        </title>
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">
            function drawVisualization() {
                // Create and populate the data table.
                var data = new google.visualization.DataTable(<?php echo $jsonTable; ?>);
                // Create and draw the visualization.
               var table = new google.visualization.OrgChart(document.getElementById('visualization'));
                table.draw(data, {legend:'none', width:10000, height:400,border: '#000000'});

            }
            google.setOnLoadCallback(drawVisualization);
            google.load('visualization', '1', {packages: ['orgchart']});
            google.visualization.events.addListener(table,'select', function() {
 alert('selected');
});
             // Add our over/out handlers.

        </script>
    </head>
    <body style="font-family: Arial;border: ;#000000">
        <div id="visualization" style="width: 500px; height: 300px; background: #000000;"></div>
    </body>
</html>

Thanks in advance

在API文档页面上的示例中，前两个节点的第一个元素是一个包含字段'v'和'f'的数组。'v'是节点的id值。f是那个节点显示的。如果您简单地将所有您想要显示的信息添加到与'f'相关的字段中，您应该能够显示您想要显示的所有内容。

您应该将详细信息与您喜欢的任何标记连接在一起。例如:

$temp[] = array('v' => $row['name'], 'f' => "<h3>{$row['id'] }</h3><p>{$row['picture'']}</p>");

如果你想像我上面那样使用html标签，不要忘记将正确的选项(allowhhtml:true)传递给.draw()函数，如下所示:

chart.draw(data, {allowHtml:true});