无法使用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});

相关内容

最新更新

热门标签：