Question

我是PHP新手..

我有一个任务来制作一个组织结构图（就像谷歌图表一样），但它是从mysql渲染的，就像下面这样org chart

这是我的数据库：sql

这是来自谷歌图表的代码..“

        <!--
        You are free to copy and use this sample in accordance with the terms of the
        Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
        -->

        <!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>
            <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">
              google.load("visualization", "1", {packages: ["orgchart"]});
            </script>
            <script type="text/javascript">
              function drawVisualization() {

// Block of codes below I want to change and render it from mysql, unfortunately dont know how to do it

    // Create and populate the data table.
                var data = google.visualization.arrayToDataTable([
                  ['Name', 'Manager', 'Tooltip'],
                  ['Mike', null, 'The President'],
                  [{v: 'Jim', f: 'Jim<br/><font color="red"><i>Vice President<i></font>'}, 'Mike', null],
                  ['Alice', 'Mike', null],
                  ['Bob', 'Jim', 'Bob Sponge'],
                  ['Carol', 'Bob', null]
                ]);

                // Create and draw the visualization.
                new google.visualization.OrgChart(document.getElementById('visualization')).
                    draw(data, {allowHtml: true});
              }

              google.setOnLoadCallback(drawVisualization);
            </script>
          </head>
          <body style="font-family: Arial;border: 0 none;">
            <div id="visualization" style="width: 300px; height: 300px;"></div>
          </body>
        </html>

有人知道吗？任何帮助将不胜感激..谢谢..

此致 Aryo

Answer 1

您可以尝试这样的事情：

<?php
// set database connection parameters
$databaseName = '<name of database>';
$username = '<user>';
$password = '<password>';
try {
    $db = new PDO("mysql:dbname=$databaseName", $username, $password);
}
catch (PDOException $e) {
    echo $e->getMessage();
    exit();
}
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

$query = $db->prepare('SELECT id, nama, parent_id FROM tbl_dummy');
$query->execute();
$results = $query->fetchAll(PDO::FETCH_ASSOC);

$flag = true;
$table = array();
$table['cols'] = array(
    array('label' => 'ID', 'type' => 'number'),
    array('label' => 'Name', 'type' => 'string'),
    array('label' => 'Parent ID', 'type' => 'number')
);
$table['rows'] = array();

foreach ($results as $row) {
    $temp = array();
    $temp[] = array('v' => (int) $row['id']);
    $temp[] = array('v' => $row['nama']);
    $temp[] = array('v' => (int) $row['parent_id']);
    $table['rows'][] = array('c' => $temp);
}
$jsonTable = json_encode($table);
?>
<!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>
        <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.
                new google.visualization.OrgChart(document.getElementById('visualization')).
                draw(data, {allowHtml: true});
            }

            google.setOnLoadCallback(drawVisualization);
            google.load('visualization', '1', {packages: ['orgchart']});
        </script>
    </head>
    <body style="font-family: Arial;border: 0 none;">
        <div id="visualization" style="width: 300px; height: 300px;"></div>
    </body>
</html>

将Google_Org_Chart与Mysql结合使用

1 个答案: