用PHP从MySQL数据中绘制highchart组织结构图_Php_Jquery_Mysql_Ajax_Highcharts

用PHP从MySQL数据中绘制highchart组织结构图

php jquery mysql ajax highcharts

用PHP从MySQL数据中绘制highchart组织结构图,php,jquery,mysql,ajax,highcharts,Php,Jquery,Mysql,Ajax,Highcharts,我想从MySQL数据动态创建一个组织结构图我有两个文件data.php和index.php 在data.php中，我读取了MySQL数据，在index.php中，我访问了data.php文件中的数据下面是data.php文件中的 <?php $servername = "localhost"; $username = "root"; $password = ""; $dbname = "highcharts"

我想从MySQL数据动态创建一个组织结构图我有两个文件data.php和index.php 在data.php中，我读取了MySQL数据，在index.php中，我访问了data.php文件中的数据下面是data.php文件中的

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "highcharts";


// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT * FROM org_chart";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
$json = [];
while($row = $result->fetch_assoc()) {
    //echo "id: " . $row["id"]. " - Name: " . $row["name"]. " " . $row["amount"]. "<br>";
    $json[]=[ (string)$row["parent"] , (string)$row["child"]];
}
echo json_encode($json);

} else {
    echo "0 results";
}
    $conn->close();
?>

下面是我的索引文件，它显示了组织结构图，但没有显示需要帮忙吗

<!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/sankey.js"></script>
<script src="https://code.highcharts.com/modules/organization.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<style>
    .highcharts-figure, .highcharts-data-table table {
        min-width: 360px;
        max-width: 800px;
        margin: 1em auto;
    }

    .highcharts-data-table table {
        font-family: Verdana, sans-serif;
        border-collapse: collapse;
        border: 1px solid #EBEBEB;
        margin: 10px auto;
        text-align: center;
        width: 100%;
        max-width: 500px;
    }
</style>
</head>
<body>
   <figure class="highcharts-figure">
        <div id="container"></div>
   </figure>

   <script type="text/javascript">
    $(document).ready(function () {
    var options = {
        chart: {
            height: 600,
            inverted: true
        },
        title: {
            text: 'Highcharts Org Chart'
        },
        accessibility: {
            point: {
                descriptionFormatter: function (point) {
                    var nodeName = point.toNode.name,
                        nodeId = point.toNode.id,
                        nodeDesc = nodeName === nodeId ? nodeName : nodeName + ', ' + nodeId,
                        parentDesc = point.fromNode.id;
                    return point.index + '. ' + nodeDesc + ', reports to ' + parentDesc + '.';
                }
            }
        },
        series: [{
            type: 'organization',
            data: [],
        }],
    };
    $.getJSON("data.php" , function (data) {
        options.series[0].data = data;
        var chart = new Highcharts.chart('container', options);
    });
});
</script>
</body>
</html>


文件
这就是你要找的吗。我想你错过了“>”了“谢谢你，先生，现在它工作了，但是当数据越来越多时，只是显示线条而不是图表本身。对于一个或两个父节点，它运行良好，有关此的任何帮助以下是捕获的图表图像，它是代码的在线复制，如果您的数据输出是共享的数组，则似乎一切正常：
<!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/sankey.js"></script>
<script src="https://code.highcharts.com/modules/organization.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<style>
    .highcharts-figure, .highcharts-data-table table {
        min-width: 360px;
        max-width: 800px;
        margin: 1em auto;
    }

    .highcharts-data-table table {
        font-family: Verdana, sans-serif;
        border-collapse: collapse;
        border: 1px solid #EBEBEB;
        margin: 10px auto;
        text-align: center;
        width: 100%;
        max-width: 500px;
    }
</style>
</head>
<body>
   <figure class="highcharts-figure">
        <div id="container"></div>
   </figure>

   <script type="text/javascript">
    $(document).ready(function () {
    var options = {
        chart: {
            height: 600,
            inverted: true
        },
        title: {
            text: 'Highcharts Org Chart'
        },
        accessibility: {
            point: {
                descriptionFormatter: function (point) {
                    var nodeName = point.toNode.name,
                        nodeId = point.toNode.id,
                        nodeDesc = nodeName === nodeId ? nodeName : nodeName + ', ' + nodeId,
                        parentDesc = point.fromNode.id;
                    return point.index + '. ' + nodeDesc + ', reports to ' + parentDesc + '.';
                }
            }
        },
        series: [{
            type: 'organization',
            data: [],
        }],
    };
    $.getJSON("data.php" , function (data) {
        options.series[0].data = data;
        var chart = new Highcharts.chart('container', options);
    });
});
</script>
</body>
</html>