javascript - 只能载入一张Zingchart

Question

我有一个问题，即使我有 2 个图表的代码，我也只能在我的网站上加载 1 个 zingchart。
代码将只生成最新的图表，在本例中为饼图，忽略条形图。
以下是我的代码

<?php
//getDBConnect function
require 'dbconnect.php';

//Get ID from form 
$id = $_GET['staffid'];

//connect to database
$con = getDBConnect();

if(!mysqli_connect_errno($con)){
$sqlQueryStr = 
        "SELECT a.ai_Name, r.duration " .
        "FROM report AS r, academicinstitution AS a " . 
        "WHERE r.ai_Id = a.ai_Id ";

$result = mysqli_query($con,$sqlQueryStr);

mysqli_close($con);
} else {
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

//Get data into array
$emparray = array();
while ($row = mysqli_fetch_assoc($result)) {
    $emparray[] = $row;
}

//Group array by ai_Name
$grouparray = array();
    foreach($emparray as $item)
    {
      if(!isset($grouparray[$item["ai_Name"]]))
        $grouparray[$item["ai_Name"]] = 0;

      $grouparray[$item["ai_Name"]] += $item["duration"];
    }
?>  
<script>
var dataBar=[
<?php 
    foreach($grouparray as $keys => $value){
        echo $value. ",";
    }
?>];

window.onload=function(){
    zingchart.render({
        id:'chartBar',
        height:400,
        width:600,
        data:{
            "graphset":[
            {
                "type":"bar",
                "title":{"text":"BarChart"},
                "series":[
                    {
                        "values":dataBar
                    }
                ]
            }
            ]
        }
    });
};
</script>

<script>
    var dataPie=[
        <?php 
            foreach($grouparray as $keys => $value){
                echo '{';
                echo '"text":"'.$keys.'","values":['.$value.']';
                echo '},';
            }
        ?>];

    window.onload=function(){
        zingchart.render({
            id:'chartPie',
            height:400,
            width:600,
            data:{
                "graphset":[
                {
                    "type":"pie",
                    "title":{"text":"PieChart"},
                    "series":dataPie
                }
                ]
            }
        });
    };
</script>

<div id="chartBar"></div>
<div id="chartPie"></div>

我该怎么办？

Answer 1

这里的问题是您已将两个函数分配给 window.onload 事件。 JavaScript 只允许在该事件触发时调用一个函数。如果您为其分配多个功能，最新的分配将覆盖之前的所有分配。这就是呈现饼图而不呈现条形图的原因。

解决方案是将两个渲染调用都放在 window.onload 回调中。

这是它的样子:

<script>
var dataBar=[
<?php 
    foreach($grouparray as $keys => $value){
        echo $value. ",";
    }
?>];

var dataPie=[
<?php 
    foreach($grouparray as $keys => $value){
        echo '{';
        echo '"text":"'.$keys.'","values":['.$value.']';
        echo '},';
    }
?>];

window.onload=function(){
    zingchart.render({
        id:'chartBar',
        height:400,
        width:600,
        data:{
            "graphset":[
            {
                "type":"bar",
                "title":{"text":"BarChart"},
                "series":[
                    {
                        "values":dataBar
                    }
                ]
            }
            ]
        }
    });

    zingchart.render({
        id:'chartPie',
        height:400,
        width:600,
        data:{
            "graphset":[
            {
                "type":"pie",
                "title":{"text":"PieChart"},
                "series":dataPie
            }
            ]
        }
    });
}
</script>

我在 ZingChart 团队。如果您还有任何问题，请大声询问。