无法使用 mysqldata 在组织 google 图表中添加用户及其图片的更多详细信息

Question

我正在使用 mysql 数据创建组织 google 图表。我能够从 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>

提前致谢

Answer 1

在 API documentation page 的示例中，前两个节点的第一个元素是一个包含字段 'v' 和 'f' 的数组。 'v' 是节点的 id 值。 'f' 是该节点中显示的内容。如果您只需将所有要显示的信息添加到与 'f' 关联的字段中，您应该能够显示所有您想要显示的信息。

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

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

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

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

无法使用 mysqldata 在组织 google 图表中添加用户及其图片的更多详细信息

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

php

json

google-api

google-visualization